[英]How to center a group of left-aligned divs?
What I'm trying to achieve is to have items one below another in same starting line but to be centered in div. 我想要达到的目的是使项目在同一起始行中一个接一个,但要在div中居中。 This is my fiddle: https://jsfiddle.net/7vdbLcL9/
这是我的小提琴: https : //jsfiddle.net/7vdbLcL9/
<div class="container">
<div id="wrapper">
<div id="inner1">Zmaja od Bosne 5</div>
<div id="inner2">71 000 Sarajevo</div>
<div id="inner3">Bosnia and Herzegovina</div>
</div>
</div>
And the CSS: 和CSS:
.container{
width:40%;
border:1px solid black;
}
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
text-align:center
}
I want to get this : 我想得到这个:
----------------------------------
Zmaja od Bosne 5
71 000 Sarajevo
Bosnia and Herzegovina
----------------------------------
You mean like this? 你的意思是这样吗? https://jsfiddle.net/7vdbLcL9/1/
https://jsfiddle.net/7vdbLcL9/1/
Your .container
gets text-align:center
, 您的
.container
获取text-align:center
,
and the #wrapper
gets display:inline-block
(so that it will be only as wide as needed, and can be centered via text-align of the parent) and text-align:left
to counter the effect of center
on the parent element. #wrapper
会display:inline-block
(这样它就只能根据需要设置宽度,并且可以通过父级的text-align居中)和text-align:left
来抵消center
对父级元素的影响。
Just use a flexbox : 只需使用flexbox即可 :
.container {
display: flex;
flex-direction: column;
align-items: center;
width:40%;
border:1px solid black;
}
#wrapper { }
Flexbox benefits: Flexbox的优点:
Note that flexbox is supported by all major browsers, except IE 8 & 9 . 请注意, 除了IE 8和9之外 ,所有主要浏览器都支持flexbox。 Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes .
某些最新的浏览器版本(例如Safari 8和IE10)需要供应商前缀 。 For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer .
要快速添加所需的所有前缀,请在左侧面板中的以下位置发布CSS: Autoprefixer 。
Are you looking for something like this? 您是否正在寻找这样的东西?
#wrapper { display: block; text-align: center; line-height: 0; font-size: 0; margin-bottom: 20px; } #wrapper div { display: inline-block; width: auto; } #wrapper2 { display: table; } #wrapper2 div { display: table-cell; width: 1%; } div div { width: 200px; line-height: 100px; background: lightseagreen; font-size: 12px; border: 1px solid yellow; text-align: center; padding: 0 1em; }
<div id="wrapper"> <div id="inner1">Zmaja od Bosne 5</div> <div id="inner2">71 000 Sarajevo</div> <div id="inner3">Bosnia and Herzegovina</div> </div> <div id="wrapper2"> <div id="inner1">Zmaja od Bosne 5</div> <div id="inner2">71 000 Sarajevo</div> <div id="inner3">Bosnia and Herzegovina</div> </div>
.container{
width:40%;
border:1px solid black;
display:flex;
}
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
text-align:center
display:flex;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.