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

时间:2018-09-30 13:48:04

标签: html css twitter-bootstrap

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

2 个答案:

答案 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>