并排漂浮中心css

-1

我想将两个图像并排居中，但由于某种原因它总是在左侧显示图像。有谁知道我怎么能让他们居中并且彼此相邻？并排漂浮中心css

谢谢！

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, 
 
#box2 { 
 
    border: 1px solid white; 
 
    float: left; 
 
    min-height: 200px; 
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 250px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 250px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
    <div id="box1"> 
 
    <h1>header1</h1> 
 
    <p>aaa</p> 
 
    </div> 
 

 
    <div id="box2"> 
 
    <h1>header2</h1> 
 
    <p>bbb</p> 
 
    </div> 
 

 
</div>

来源

2017-09-24 max

@jack我猜OP的关注是使他们的水平居中，在这种情况下，你可能是对的。这个问题没有提到。 – bhansa

删除float: left和使用display: inline-block

#box1, #box2 { 
    border: 1px solid white; 
    display: inline-block; 
    min-height: 200px; 
    color: white; 
}

#container { 
 
    width: auto; 
 
    margin: 0 auto; 
 

 
    border: 1px solid #665544; 
 
    text-align: center; 
 
} 
 

 
#box1, #box2 { 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
    min-height: 200px; 
 
    
 
    color: white; 
 
} 
 

 
#box1 { 
 
    width: 200px; 
 
    background-color: #111; 
 
} 
 

 
#box2 { 
 
    width: 200px; 
 
    background-color: #777; 
 
}

<div id="container"> 
 

 
<div id="box1"> 
 
<h1>header1</h1> 
 
<p>aaa</p> 
 
</div> 
 

 
<div id="box2"> 
 
<h1>header2</h1> 
 
<p>bbb</p> 
 
</div> 
 

 
</div>

Fiddle

来源

2017-09-24 20:24:16 jack

已更新 - 您可以使用网格。

#container { 
     width: 100%; 
     border: 1px solid #665544; 
     display: grid; 
     grid-template-columns: 1fr 1fr; 
     text-align: center; 
    } 

    .box { 
     width: 250px; 
     border: 1px solid white; 
     display: block; 
     min-height: 200px; 
     color: white; 
     margin-right: auto; 
     margin-left: auto; 
    } 

    #box1 { 
     background-color: #111; 
    } 

    #box2 { 
     background-color: #777; 
    }

来源

2017-09-24 20:31:40

测试你的代码。这不是解决问题。 – jack

@jack代码更新 –

OP需要将两个div并排在同一行上。 – jack

-1

删除float：left;从＃box1，＃box2并添加display：inline-block; PS：这是更好，如果你使用.box的代替＃盒1，＃BOX2

，或者使用Twitter的引导（网格系统）

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style type="text/css"> 
     #container { 
      width: auto; 
      margin: 0 auto; 
      border: 1px solid #665544; 
      text-align: center; 
     } 

     .box { 
      width: 250px; 
      border: 1px solid white; 
      display: inline-block; 
      min-height: 200px; 
      color: white; 
     } 

     #box1 { 
      background-color: #111; 
     } 

     #box2 { 
      background-color: #777; 
     } 
    </style> 
</head> 
<body> 

    <div id="container"> 

    <div id="box1" class="box"> 
    <h1>header1</h1> 
    <p>aaa</p> 
    </div> 

    <div id="box2" class="box"> 
    <h1>header2</h1> 
    <p>bbb</p> 
    </div> 

    </div> 

</body> 
</html>

来源

2017-09-24 20:36:54

您的解决方案已发布。 – jack

并排漂浮中心css

回答

相关问题