我正在使用Bootstrap 3编码页面。我有一个容器,并且在其中放置了一行,并分为两列(col-6),居中文本(text-align:居中于父对象,级联到每个孩子) )。问题是这两列中的一列太宽,因为它的文本比另一列多。然后,我设置最大宽度以均等地呈现它们,但是现在它们在屏幕上被拉到屏幕的左侧,而不是完美居中。如何再次居中保留max-width属性?
HTML
<div class="servizi services servizi_jumbotron">
<br>
<h1 class="servizi_title">Servizi Per i Privati</h1>
</div>
<br>
<br>
<div class="servizi container">
<p><b>GET ON BOARD</b> si occupa della formazione professionale e linguistica di giovani professionisti, orientati ad un mondo del lavoro sempre piu' competitivo ed internazionale. Mettiamo a disposizione per i privati numerosi servizi quali:</p>
<br>
</div>
<div class="servizi container">
<div class="row">
<div class="col-md-6 service_box">
<img src="" alt="">
<li>Corsi individuali di formazione online e/o in presenza volti alla preparazione dei candidati a
sostenere colloqui di lavoro in lingua inglese.</li>
<li>Corsi di inglese standard e commerciale a seconda delle esigenze del cliente..</li>
<li>Corsi di lingua italiana per stranieri individuali o di gruppo, presso privati o aziende</li>
</div>
<div class="col-md-6 service_box">
<img src="" alt="">
<li>Preparazione di colloqui di lavoro per vari settori tra cui Pharma, Oil and Gas, Hospitality, Food & Beverage…</li>
<li>Ottimizzazione di profili Linkedin</li>
<li>Organizzazione di seminari e workshop formativi internazionali con docenti e ricercatori specializzati.</li>
</div>
</div>
</div>
CSS
.servizi_jumbotron {
background: url("../images/students.jpg");
width: 100%;
height: 20vw;
margin: 0;
color: #ffffff;
font-size: 30px;
text-shadow: 1px 1px 1px #222;
min-height: 200px;
}
.servizi_title {
font-size: 45px;
}
.service_box {
max-width: 450px;
}
答案 0 :(得分:1)
首先,您缺少<ul></ul>
标签。
您已将col-md-6
类用于 service_box 元素。这意味着在 md 下,他们将使用100%的父级witdh。如果要将列宽保持为父级的50%,则只需使用col-xs-6
并在 md 下添加偏移量即可。您无需设置max-width
。尽管我宁愿在较小的屏幕上放大它。像这样:
.servizi_jumbotron {
background: url("../images/students.jpg");
width: 100%;
height: 20vw;
margin: 0;
color: #ffffff;
font-size: 30px;
text-shadow: 1px 1px 1px #222;
min-height: 200px;
}
.servizi_title {
font-size: 45px;
}
.service_box {
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="servizi services servizi_jumbotron">
<br>
<h1 class="servizi_title">Servizi Per i Privati</h1>
</div>
<br>
<br>
<div class="servizi container">
<p><b>GET ON BOARD</b> si occupa della formazione professionale e linguistica di giovani professionisti, orientati ad un mondo del lavoro sempre piu' competitivo ed internazionale. Mettiamo a disposizione per i privati numerosi servizi quali:</p>
<br>
</div>
<div class="servizi container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-0 service_box">
<img src="" alt="">
<ul>
<li>Corsi individuali di formazione online e/o in presenza volti alla preparazione dei candidati a
sostenere colloqui di lavoro in lingua inglese.</li>
<li>Corsi di inglese standard e commerciale a seconda delle esigenze del cliente..</li>
<li>Corsi di lingua italiana per stranieri individuali o di gruppo, presso privati o aziende</li>
</ul>
</div>
<div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-0 service_box">
<img src="" alt="">
<ul>
<li>Preparazione di colloqui di lavoro per vari settori tra cui Pharma, Oil and Gas, Hospitality, Food & Beverage…</li>
<li>Ottimizzazione di profili Linkedin</li>
<li>Organizzazione di seminari e workshop formativi internazionali con docenti e ricercatori specializzati.</li>
</ul>
</div>
</div>
</div>
答案 1 :(得分:0)
您可以使用css display flex属性将“ service_box”居中。还有其他方法可以使其居中。
.servizi_jumbotron {
background: url("../images/students.jpg");
width: 100%;
height: 20vw;
margin: 0;
color: #ffffff;
font-size: 30px;
text-shadow: 1px 1px 1px #222;
min-height: 200px;
}
.servizi_title {
font-size: 45px;
}
.service_box {
max-width: 450px;
}
.flex-row{
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="servizi services servizi_jumbotron">
<br>
<h1 class="servizi_title">Servizi Per i Privati</h1>
</div>
<br>
<br>
<div class="servizi container">
<p><b>GET ON BOARD</b> si occupa della formazione professionale e linguistica di giovani professionisti, orientati ad un mondo del lavoro sempre piu' competitivo ed internazionale. Mettiamo a disposizione per i privati numerosi servizi quali:</p>
<br>
</div>
<div class="servizi container">
<div class="row flex-row">
<div class="col-md-6 service_box">
<img src="" alt="">
<li>Corsi individuali di formazione online e/o in presenza volti alla preparazione dei candidati a
sostenere colloqui di lavoro in lingua inglese.</li>
<li>Corsi di inglese standard e commerciale a seconda delle esigenze del cliente..</li>
<li>Corsi di lingua italiana per stranieri individuali o di gruppo, presso privati o aziende</li>
</div>
<div class="col-md-6 service_box">
<img src="" alt="">
<li>Preparazione di colloqui di lavoro per vari settori tra cui Pharma, Oil and Gas, Hospitality, Food & Beverage…</li>
<li>Ottimizzazione di profili Linkedin</li>
<li>Organizzazione di seminari e workshop formativi internazionali con docenti e ricercatori specializzati.</li>
</div>
</div>
</div>