文章/答案/技术大牛

发布

社区首页 >问答首页 >引导:水平对齐H1和下拉按钮

问引导:水平对齐H1和下拉按钮
EN

Stack Overflow用户

提问于 2022-07-12 15:06:56

回答 1查看 103关注 0票数 1

我在H1标签旁边放了一个下拉按钮，我希望下拉按钮向上移动一点，因为它们现在看起来不对齐。

我用的是自带5.1.3

<div class="ps-4 pt-4 pe-4" id="profile">
    <div class="dropdown">
        <h1 class="d-inline-block display-1">Cheese</h1>
    
        <button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
    </div>
</div>

html

css

twitter-bootstrap

bootstrap-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-12 15:17:41

您可以使用Bootstrap的flexbox类和属性对齐项

https://getbootstrap.com/docs/5.0/utilities/flex/

在这种情况下，我只是做了居中，但您可以使用任何属性，给您的位置，您正在寻找。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<div class="ps-4 pt-4 pe-4" id="profile">
  <div class="d-flex flex-row align-items-center dropdown">
    <h1 class="d-inline-block display-1">Cheese</h1>

    <button class="d-inline-block ms-2 btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="authorControlsDropdownButton" data-bs-toggle="dropdown" aria-exanded="false"></button>
  </div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72954520

复制

相似问题

问引导:水平对齐H1和下拉按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:水平对齐H1和下拉按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:水平对齐H1和下拉按钮
EN