Question

我希望内容块在其外部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>

Answer 1

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

这是指向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>

Answer 2

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

Answer 3

对于水平居中，如果子元素是行内元素，则使用text-align: center；如果子元素是块元素，则使用margin: 0 auto。这就是要点。

希望这可以为您提供帮助。

响应式布局中的中心Div内容

3 个答案: