将每个Div中的所有内容居中 - 响应？

.row { 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 

 
.col { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    height: 150px; 
 
} 
 

 
#left { 
 
    float: left; 
 
    width: 30%; 
 
    height: 150px; 
 
    background-color: red; 
 
} 
 

 
#center { 
 
    width: 40%; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
#right { 
 
    float: right; 
 
    width: 30%; 
 
    background-color: blue; 
 
}

<header> 
 
    <div class="row"> 
 
     <div class="col" id="left"> 
 
      Test Test Text 
 
     </div> 
 
     <div class="col" id="center"> 
 
      Image 
 
     </div> 
 
     <div class="col" id="right"> 
 
      Text Image 
 
     </div> 
 
    </div> 
 
</header>

我看了那么多帖子，但仍无法使这项工作。我错过了一些东西。我想在我的头文件中包含这三个div。中心div应该居中在页面中间，它将是一个图像。其他div将在左侧和右侧，并根据需要组合文本和图像。我希望所有3个div都有垂直和水平居中的内容。我如何做到这一点，并保持对div浏览器和屏幕尺寸用户的一些响应。响应是次要问题，让内容对齐是主要挑战。谢谢，

来源

2017-02-11 Basic Blue

您可以使用

列

.row { 
 
    width: 100%; 
 
    height: 150px; 
 
    display: table; 
 
} 
 

 
.col { 
 
    width: 30%; 
 
    height: 150px; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#left { 
 
    background-color: red; 
 
} 
 

 
#center { 
 
    width: 40%; 
 
    background-color: green; 
 
} 
 

 
#right { 
 
    background-color: blue; 
 
}

<header> 
 
<div class="row"> 
 
\t <div class="col" id="left"> 
 
     Test Test Text 
 
    </div> 
 
\t <div class="col" id="center"> 
 
\t \t Image 
 
\t </div> 
 
\t <div class="col" id="right"> 
 
\t \t Text Image 
 
\t </div> 
 
</div> 
 
</header>

来源

2017-02-11 18:58:37 Banzay

我认为这是我将使用的方法。感谢它似乎运作良好。 –

不客气。不要忘记将答案标记为已接受。 – Banzay

display: table行与display: table-cell你可以使用CSS3 flexbox它：

.row, .col { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.col { 
 
    height: 200px; 
 
    flex: 1 100%; 
 
} 
 

 
#left { 
 
    background-color: red; 
 
} 
 

 
#center { 
 
    background-color: green; 
 
} 
 

 
#right { 
 
    background-color: blue; 
 
}

<header> 
 
    <div class="row"> 
 
     <div class="col" id="left"> 
 
      Test Test Text 
 
     </div> 
 
     <div class="col" id="center"> 
 
      Image 
 
     </div> 
 
     <div class="col" id="right"> 
 
      Text Image 
 
     </div> 
 
    </div> 
 
</header>

JSFiddle

来源

2017-02-11 19:26:25

我不确定Flexbox是否被所有浏览器支持，或者是一个标准... –

@BasicBlue它受所有现代浏览器的支持，请查看[我可以使用]（http://caniuse.com/#feat= flexbox），规范中的状态 - [W3C Candidate Recommendation]（https://www.w3.org/TR/css-flexbox-1/）。 –

将每个Div中的所有内容居中 - 响应？

回答

相关问题