Question

我正在使用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;
}

Answer 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>

Answer 2

您可以使用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>

在CSS上设置max-width属性使行中的元素不居中

2 个答案: