Question

我该怎么办这个中心？如您所见，它位于屏幕的左侧。我试过margin:0 auto;，但它没有帮助我。

网址：http://www.dev.dkenergy.sk/elektromontaze

我想要集中精力？

非常感谢你。

HTML：

<div class="container-fluid elektromontaze">
  <div class="row">
    <div class="col-md-12">
      <div class="container">
        <div class="col-md-4">
          <div class="well">
          </div>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-12">
              <div class="elone">
                <h3 class="bold">silnoprúdové zariadenia</h3>
                <h4>Klasická inštalácia (domy, firmy) do 1000V vrátené bloskozvodov</h4>
                <div class="elektromontaze-separator"></div>
                <p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="eltwo">
                <h3 class="bold">slaboprúdové zariadenia</h3>
                <div class="elektromontaze-separator"></div>
                <h4>Komunikačné a zabezpečovacie systémy (CCTV systém, alarmy)</h4>
                <p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="elone">
                <h3 class="bold">opravy a údržby</h3>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="eltwo">
                <h3 class="bold">kompletné revízie</h3>
              </div>
            </div>
          </div>
        </div>
      </div>      
    </div>
  </div>
</div>

CSS：

.elektromontaze {
background:url("/images/bg-fotovoltaika.jpg");
background-size:100% auto;
background-repeat:no-repeat;
min-height:700px;
}

.elektromontaze-separator {
border-top:1px #353535 solid;
width:100%;
margin:0 auto 20px auto;
}

.elektromontaze h3 {
font-size:1.5em;
text-transform: uppercase;
}

.elektromontaze .col-md-4 {
margin:0;
padding:0;
width:159px;
}

.elektromontaze .col-md-8 {
margin:0;
padding:0;
}

.elektromontaze .well {
background-image: url("/images/bg-side.jpg");
background-repeat: no-repeat;
min-height: 600px;
width:159px;
padding: 19px;
margin-bottom: 20px;
border:none;
margin:0;
padding:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.elone {
background:#f9cb42;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

.eltwo {
background:#f2d170;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

Answer 1

只需添加以下css：

.container {
    display: flex;
    justify-content: center;
}

Answer 2

我不确定这是不是你想要的，但也许答案是： - 请从.elektromontaze .col-md-4行删除：保证金：0 - 添加到col-md-4类col-md-offset-1

Answer 3

尝试此解决方案，请全屏运行

.elektromontaze {
background:url("/images/bg-fotovoltaika.jpg");
background-size:100% auto;
background-repeat:no-repeat;
min-height:700px;
}

.elektromontaze-separator {
border-top:1px #353535 solid;
width:100%;
margin:0 auto 20px auto;
}

.elektromontaze h3 {
font-size:1.5em;
text-transform: uppercase;
}

.elektromontaze .col-md-4 {
margin:0;
padding:0;
width:159px;
}

.elektromontaze .col-md-8 {
margin:0;
padding:0;
}

.elektromontaze .well {
background-image: url("/images/bg-side.jpg");
background-repeat: no-repeat;
min-height: 600px;
width:159px;
padding: 19px;
margin-bottom: 20px;
border:none;
margin:0;
padding:0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
position: absolute;
  right:0;
}

.elone {
background:#f9cb42;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

.eltwo {
background:#f2d170;
border-bottom: 3px #b39439 solid;
padding:20px 20px 20px 40px !important;
min-height:105px !important;
}

<link href="http://www.dev.dkenergy.sk/assets/css/style.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container-fluid elektromontaze">
		<div class="row">
			<div class="col-md-12">
			<div class="container">
    		<div class="col-md-3">
        		<div class="well">
        		</div>
    		</div>
    	<div class="col-md-8">
        	<div class="row">
            	<div class="col-md-12">
                	<div class="elone">
                		<h3 class="bold">silnoprúdové zariadenia</h3>
                		<h4>Klasická inštalácia (domy, firmy) do 1000V vrátené bloskozvodov</h4>
						<div class="elektromontaze-separator"></div>
                		<p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
                	</div>
            	</div>
        	</div>
        	<div class="row">
            	<div class="col-md-12">
                	<div class="eltwo">
                		<h3 class="bold">slaboprúdové zariadenia</h3>
						<div class="elektromontaze-separator"></div>
                		<h4>Komunikačné a zabezpečovacie systémy (CCTV systém, alarmy)</h4>
                		<p>odborné poradenstvo ako aj samotná inštalácia kvalifikovanými odborníkmi vrátané kabeláže a dodanie materiálu.</p>
                	</div>
            	</div>
        	</div>
        	<div class="row">
            	<div class="col-md-12">
                	<div class="elone">
                		<h3 class="bold">opravy a údržby</h3>
                	</div>
            	</div>
        	</div>
        
        	<div class="row">
            	<div class="col-md-12">
                	<div class="eltwo">
                		<h3 class="bold">kompletné revízie</h3>
                	</div>
            	</div>
        	</div>
    	</div>
		</div></div>
		</div>
</div>

Answer 4

尝试添加带对齐中心的div标签。看看这个：

<div align='center'>THE CODE</div>

希望它有所帮助！

Bootstrap - 不能居中div

4 个答案: