在div中使用页边距-top将页边距应用于标头。
在div中使用页边距-top将页边距应用于标头。
提问于 2017-06-08 17:16:59
我试图对div中的文本应用页边距，使文本以水平和垂直的方式居中。我不确定是否有更好的方法来做到这一点，因为我对HTML和编程非常陌生。
<!-- begin header -->
<header style="background-color:#8b0000" style="height:50px;">
<!-- frankenstien-ish bootstrap grid within a bootstrap grid -->
<div class="row">
<div class="col-md-6">
<!-- this div is a placeholder div and has no content -->
</div>
<!-- this div contains all of the navigation buttons in their own bootstrap
grid -->
<div class="col-md-6">
<p style="text-align:center;margin">Test Text</p>
<!-- I know the margin has no value right now. Read question -->
</div>
</div>
</header>
<!-- end header -->
当我试图对<p>元素应用边距时，边距会使标头更大，而不会影响<p>元素的边距。如何使元素垂直和水平地居中？( <p>是一个测试。它将被一个按钮取代)
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-08 17:44:27
从代码中的注释中可以清楚地看到，您正在尝试创建一些导航按钮。我不确定引导，但一般来说，我更喜欢在构建导航按钮时使用列表项。这是因为它的结构很容易控制、编辑和理解。
在回答您的问题时，flex非常适合在另一个中对齐内容，但我不希望在这个用例中使用一个、<li>或<div>标记->在里面添加名称，然后使用填充设置空白。
<ul class="navbtn">
<li>button 1 </li>
<li>button 2 </li>
<li>button 3 </li>
</ul>现在CSS将会是
.navbtn li {
padding : 10px 5px;
}根据您的舒适度来玩这些值，这将使文本在框内对齐。
在添加导航按钮时，使用列表项将比其他任何东西都更符合要求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44441968
复制相关文章
相似问题
腾讯云开发者
