如何将元素与Div的中心对齐

Question

我需要将元素与div的确切中心对齐，就像在第3个div中一样

<div class="main">
    <div style="float: left;"><h2>Home</h2></div>
    <div><span>Welcome</span></div>
    <div style="float: right;">
        <select class="form-control">
            <option>Option 1</option>
            <option>Option 222222</option>
            <option>Option 33333333</option>
            <option>Option 444444444</option>
        </select>
    </div>
</div>
<br/>
<div class="main">
    <div style="float: left;"><h2>Home</h2></div>
    <div><span>Welcome</span></div>
    <div style="float: right;">
        <a href="#">Click here to navigate</a>
    </div>
</div>
<br/>
<div class="main">
    <span>Welcome</span>
</div>

点击here获取jsFiddle链接。

Answer 1

相同的HTML，这个CSS，小css技巧，使用position absolute来计算父的所有宽度，是这个类：.over-all：

body{
  background:none;
  margin:0;
  padding:0;
}
.over-all{
  position:absolute;
  top:0;
  left:0;
  padding:0;
  width:100%;

  z-index:3;
  text-align:center;
}
.main{
  width:90%;
  position:relative;
  text-align:center;

  border: 1px solid black;
  line-height:2.5;
}
.main> div{
  display:inline-block;

}
select{
  //float:right;
    width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}

Answer 2

html是一样的，我在div中的跨度和.main中添加了一些样式。它使用绝对位置来使元素居中，而不管其中还有什么。这样做你必须设置父div的高度

body{
  background:none;
}

.main{
  text-align:center;
  border: 1px solid black;
  line-height:2.5;
  height: 40px;
}
.main> div{
  display:inline-block;
  height: 40px;

}
select{
  //float:right;
    width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}

div span {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: 200px;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

这是你的小提琴http://jsfiddle.net/cwkzq/98/的更新

Answer 3

<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div style="width:1%"><span>Welcome</span></div>
    <div style="float: right;"><select  style="padding:0rem;" class="form-control">
        <option>Option 1</option>
        <option>Option 222222</option>
        <option>Option 33333333</option>
        <option>Option 444444444</option>
    </select></div>
</div>
<br/>
<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div style="width:2%;"><span>Welcome</span></div>
    <div style="float: right;">
    <a href="#">qwertyusdfghjfghiop</a>
    </div>
</div>
<br/>
<div class="main">
  <span>Welcome</span>
</div>

Answer 4

可以通过定位来做到这一点......！试试这可能会对你有所帮助

body{
  background:none;
}

.main{
  text-align:center;
  border: 1px solid black;
  line-height:2.5;
}
.main> div{
  display:inline-block;
  
}
select{
  //float:right;
	width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css'/>
<div class="main">
<div style="position:absolute;left:0px;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
	<div style="position:absolute;right:0px;"><select class="form-control">
		<option>Option 1</option>
		<option>Option 222222</option>
		<option>Option 33333333</option>
		<option>Option 444444444</option>
    </select></div>
</div>

<br/>
<div class="main">
<div style="position:absolute;left:0px;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
	<div style="position:absolute;right:0px;">
    <a href="#">qwertyusdfghjfghiop</a>
	</div>
</div>
<br/>
<div class="main">
  <span>Welcome</span>
</div>

Answer 5

我相信

position: absolute;

会在响应和移动方面造成问题。我的解决方案修复了您的问题，而没有向元素添加任何位置属性：

.main> div{
  display:inline-block;
  width: 33%; //<--- Just add this
}

这样，即使在响应时，您的元素也始终位于元素中间的中心。

Answer 6

插入到<span>包含欢迎以下内容

style="display:block; position:absolute; margin:auto; left:0; right:0; top:0; bottom:0;">