内容简介:翻译自:https://stackoverflow.com/questions/11764905/align-2-divs-horizontally-inside-a-third-container-div
我有以下代码:
<div id="container"> <div id="div1">Div 1</div> <div id="div2">Div 2</div> </div>
我希望能够将#box1和#box2放在容器内的另一个旁边.容器居中
这将使容器居中,并使其中的两个div居中,同时将样式与实际内容分开:
HTML:
<div id="container"> <div>Div 1</div> <div>Div 2</div> </div>
CSS:
#container > div { display: inline-block; border: solid 1px #000; } #container { border: solid 1px #ff0000; text-align: center; margin: 0px auto; width: 40%; }
工作范例:
2017年更新:
Flexbox正变得越来越普遍.以下是使用Flexbox实现类似结果的方法:
HTML:
<div class="outer"> <div>1</div> <div>2</div> </div>
CSS:
.outer { border: 1px solid #000; display:flex; justify-content: center; padding: 3px; } .outer > div { border: 1px solid #000; margin:2px; }
翻译自:https://stackoverflow.com/questions/11764905/align-2-divs-horizontally-inside-a-third-container-div
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
High-Performance Compilers for Parallel Computing
Michael Wolfe / Addison-Wesley / 1995-6-16 / USD 117.40
By the author of the classic 1989 monograph, Optimizing Supercompilers for Supercomputers, this book covers the knowledge and skills necessary to build a competitive, advanced compiler for parallel or......一起来看看 《High-Performance Compilers for Parallel Computing》 这本书的介绍吧!