如何将容器<div>的2个浮动<div>元素中心放在一起?

时间:2016-12-25 05:45:29

标签: html css webpage

我有2个div元素&#34; date1&#39;和&#34; date2&#34;在父export default [ { path: '/', component: App, childRoutes: [ { path: 'signup', getComponent(location, cb) { System.import('./modules/App/components/Authentication/Login.js') .then(loadRoute(cb)) .catch(errorLoading); } } ] } ] 日期。我可以把它们放在一起但是左右对齐。但我希望他们在 center 彼此相邻,如[o o] not [oo]

div

3 个答案:

答案 0 :(得分:1)

尝试使用flex:

#date1 {
background-color:green;
float: left;
width: 32%;
  height:200px;
text-align: center;
padding: 2px;
}
#date2 {
float: left;
width: 32%;
  height:200px;
text-align: center;
padding: 2px;
  background-color:blue;
}
.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
}
<div class="container-fluid">
  <div class="row">
    <div id="date1">
    </div>
    <div id="date2">
    </div>
  </div>
</div>

答案 1 :(得分:0)

使用display:inline-block;

尝试
<div class="container-fluid">
  <div class="row">
    <div id="date1">
    </div>
    <div id="date2">
    </div>
  </div>
</div>

css将是

.row{
display:inline-block;
width:100%;
//your other css
}
.date1 .date2{
vertical-align:top;
//your other css
}

答案 2 :(得分:0)

使用

display:inline-block

而不是

'float:left'.

试试这个小提琴

https://jsfiddle.net/92q5xr3p/