实现HTML元素在一个div中的水平对齐
P粉431220279
P粉431220279 2023-08-22 00:03:55
[JavaScript讨论组]
<p>我有三个HTML对象,想要在一个容器div中将Previous按钮放在左侧,Next按钮放在右侧,span放在中间。</p> <pre class="brush:php;toolbar:false;">&lt;PREVIOUS&gt; |SPAN| &lt;NEXT&gt;</pre> <p><br /></p> <pre class="snippet-code-css lang-css prettyprint-override"><code> #btnPrevious { float:left; } #spanStage { font-weight:bold; vertical-align:middle; } #btnNext { float:right; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div&gt; &lt;input type="button" value="Previous" id="btnPrevious"/&gt; &lt;span id="spanStage"&gt;Stage 5&lt;/span&gt; &lt;input type="button" value="Next" id="btnNext"/&gt; &lt;/div&gt;</code></pre> <p><br /></p>
P粉431220279
P粉431220279

全部回复(2)
P粉448130258

“display:flex”样式是使这些元素在同一行的好方法。无论div中有什么类型的元素。特别是如果输入类是form-control,其他解决方案如bootstrap,inline-block将无法很好地工作。

示例:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
     <input type="button" value="Previous" id="btnPrevious"/>
     <span id="spanStage">Stage 5</span>
     <input type="button" value="Next" id="btnNext"/>
</div>

有关flexbox的更多详细信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-direction: row, column

justify-content: flex-end, center, space-between, space-around

align-items: stretch, flex-start, flex-end, center

P粉798010441

只需将text-align: center添加到您的包装器中,以设置所有非浮动/非定位子元素的水平对齐:

div{
    text-align:center;
}

<span>默认为内联元素。因此,您可以在它们上使用display:block并适当地对其进行样式设置,或者稍微调整父元素的样式。由于除了<span><button>之外没有其他子元素,所以最好使用这个简单的解决方案。

请注意,text-align:<value>会从父元素继承,因此如果您想在包装器中包含其他内容,应该检查text-align:center是否适合您。否则,在特定元素中使用text-align:<value>,其中value可以是leftrightcenterjustify

JSFiddle演示

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号