Центр Div Содержание в отзывчивом макете - PullRequest
Новая
       7

Центр Div Содержание в отзывчивом макете

0 голосов
/ 01 сентября 2018

Я бы хотел, чтобы блок контента был центрирован горизонтально внутри его внешнего 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>

Ответы [ 3 ]

0 голосов
/ 01 сентября 2018

Ваш подход не очень хорош. Для этого вы должны использовать определение CSS list со свойствами padding и border. Я решил это для вас. Я внес изменения в ваш код, чтобы сделать его более дружелюбным. Но для медиа-запроса вы должны работать.

Вот ссылка на центр div на странице или другой 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>
0 голосов
/ 01 сентября 2018

Еще немного поэкспериментировав, я просто добавил «text-align: center» к классу «.spectable», который является общим контейнером, а затем внутри каждого внутри Div я добавил «text-align: left». Это держало центр div, когда они сложены, и текст выровнен по левому краю.

0 голосов
/ 01 сентября 2018

Для горизонтального центрирования, если дочерний элемент является встроенным элементом, используйте text-align: center., Если дочерний элемент является блочным элементом, используйте margin: 0 auto. Это основные моменты.

Хотелось бы, чтобы это помогло вам.

...