响应式布局中的中心 div 内容答案

【问题标题】：Center Div Content Within Responsive Layout响应式布局中的中心 div 内容
【发布时间】：2019-02-07 07:19:00
【问题描述】：

我想让内容块在其外部 div 中水平居中。我还试图让 div 内容块在它们开始在较小的屏幕上堆叠时水平居中。现在，当列堆叠时，它们是左对齐的。我对 flex 没有任何运气。下面的工作示例；

body {
  background: #ccc;
}	
	
.spechighlights {
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  line-height: 50px;
  color: #343434;
  text-transform: uppercase;
}

.spectable {
  width: 100%; 
  max-width: 900px; 
  background-color: #FFF; 
  border: 1px solid #d1d1d1; 
  padding: 48px; 
  margin: 0 auto 0 auto;
}

.datacell {
  width: 50%;
  display: inline-block;
  margin-bottom: 10px;
  max-width: 390px;
  float: left;
}	
	
.datainside {
  width: 50%;
  max-width: 195px;
  float: left;
  font-weight: 300;
}
	
.datainside2 {
  width: 40%;
  max-width: 145px;
  float: left;
  font-weight: 300;
}
	
.datainside3 {
  width: 60%;
  max-width: 245px;
  float: left;
  font-weight: 300;
}			

div.datacell.spec {
  font-family: 'Oswald', sans-serif;
  color: #616161;
  font-size: 15px;
}
	
div.datainside.medium {
  font-weight: 500;
}

div.datainside2.medium {
  font-weight: 500;
}	

hr {
  background-color:#c0c0c0; 
  width: 100%; 
  margin: 35px 0 8px 0; 
  clear: both;
}	

@media all and (max-width:960px){	
  .datacell {
    width: 100%; 
    float: none;
  }
}

<div style="max-width:1000px; width:95%; margin:0 auto; overflow:hidden;">
  <div class="spectable">
    <h3 class="tabletitle">Title</h3>
    <div class="datacell spec">
      <div class="datainside medium">Length Overall</div>
      <div class="datainside">13.13M / 43' 1"</div>
      <hr style="margin-top:30px;">
      <div class="datainside medium">Beam</div>
      <div class="datainside">3.3M / 10' 10"</div>
      <hr>
      <div class="datainside medium">Draft</div>
      <div class="datainside">1.0M / 3' 3"</div>
      <hr>
    </div>
    <div class="datacell spec">
      <div class="datainside2 medium">Gas Power</div>
      <div class="datainside3">2 x 662HP Mercury Racing With NXT  Drives</div>
      <hr style="margin-top:30px;">
      <div class="datainside2 medium">&nbsp;</div>
      <div class="datainside3">2 x 430HP Mercruiser 8.2 MAG H.O. ECT</div>
      <hr> 
    </div>

    <p style="clear:both; padding-top:15px;">
      <a href="#">Specs</a>
      &nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="#">Color Options</a>   
    </p>
  </div>
</div>

【问题讨论】：

好的，但是有什么问题？
未正确居中。

标签： html css responsive

【解决方案1】：

通过更多的实验，我简单地将“text-align:center”添加到“.spectable”类中，这是整个容器，然后在每个内部 Div 中，我添加了“text-align:left”。这使 div 在堆叠时保持居中并且文本左对齐。

【讨论】：

【解决方案2】：

你的方法不好。为此，您应该将定义CSS list 与填充和边框属性一起使用。我已经为你解决了。我已对您的代码进行了更改以使其更友好。但是对于媒体查询，您必须工作。

这是center div within a page or another div的链接。

以下是我为您更改的代码。那里有很多问题我无法在这里描述。

<!DOCTYPE html>
<html>
<head>
<style>
body {background:#ccc;} 

.spechighlights {
font-family: 'Oswald', sans-serif;
font-size: 50px;
line-height:50px;
color:#343434;
text-transform:uppercase;
}


.spectable {
width:100%; 
max-width:900px; 
background-color:#FFF; 
border: 1px solid #d1d1d1; 
padding:48px; 
margin: 0 auto 0 auto;
float:left;}

.datacellL {
width:40%;
display:inline-block;
margin-bottom:10px;
max-width:300px;
float:left;} 

.datacellR {
width:60%;
display:inline-block;
margin-bottom:10px;
max-width:480px;
float:left;}    

.datainside {
width:50%;
max-width:195px;
float:left;
font-weight:300;
padding:10px 0px;
border-bottom:2px solid rgba(200,200,200,1);}

.datainside2 {
width:35%;
max-width:100px;
float:left;
font-weight:300;
padding:10px 0px;
border-bottom:2px solid rgba(200,200,200,1);
}

.datainside3 {
width:65%;
max-width:300px;
float:left;
font-weight:300;
padding:10px 0px;
border-bottom:2px solid rgba(200,200,200,1);}           

div.datacell.spec {
font-family: 'Oswald', sans-serif;
color:#616161;
font-size:15px;
}

div.datainside.medium {font-weight:500;}
div.datainside2.medium {font-weight:500;}   

hr {
background-color:#c0c0c0; 
width:100%; 
margin:35px 0 8px 0; 
clear:both;}    


@media all and (max-width:960px){   


.datacell {
width:100%; 
float:none;}}
</style>
</head>

<body>
<div style="max-width:1250px; width:95%; margin:0 auto; overflow:hidden;">


<div class="spectable">
<h3 class="tabletitle">Title</h3>


<div class="datacellL spec">
<div class="datainside medium">Length Overall</div>
 <div class="datainside">13.13M / 43' 1"</div>

<div class="datainside medium">Beam</div>
<div class="datainside">3.3M / 10' 10"</div>

<div class="datainside medium">Draft</div>
<div class="datainside">1.0M / 3' 3"</div>

</div>

<div class="datacellR spec">
<div class="datainside2 medium">Gas Power</div>
<div class="datainside3">2 x 662HP Mercury Racing With NXT  Drives</div>

<div class="datainside2 medium">&nbsp;</div>
<div class="datainside3">2 x 430HP Mercruiser 8.2 MAG H.O. ECT</div>
</div>



<p style="clear:both; padding-top:15px;"><a href="#">Specs</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Color Options</a>   </p>
</div>
</div> 

</body>
</html>

【讨论】：

【解决方案3】：

对于水平居中，如果子元素是内联元素，使用text-align: center。如果子元素是块元素，使用margin: 0 auto。这才是重点。

希望这对您有所帮助。

【讨论】：