当前位置：theitroad>Html 如何在引导程序中将 div 居中？

Html 如何在引导程序中将 div 居中？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/28529629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:30:50 　来源:igfitidea点击:

How to center divs in row in bootstrap?

htmlcss

提问by tom

I want to center my 7 divs and I don't know really how to do it. Any idea? I don't want to change margin all elements individually, as you can see on the picture divs are not centered compared to my buttons and there's a 12 column bootstrap problem

我想将我的 7 个 div 居中，但我真的不知道该怎么做。任何的想法？我不想单独更改所有元素的边距，正如您在图片上看到的，与我的按钮相比，div 没有居中，并且存在 12 列引导问题

screenshot

screenshot

<style type="text/css">
.properbut{
height: 180px;
display: block;
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;

}

.fonts{
font-family:Georgia,serif;
color:#4E443C;
font-variant: small-caps; 
text-transform: none; 
font-weight: 100; 
font-size:   30px
}
</style>

<div class="container">
<br><br><br><br>

<div class="jumbotron">
    <br><br><br><br><br><br>
    <div class="row">
                    <div class ="col-md-2">
                    </div>

                    <div class ="col-md-1 ">
                       <img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
                    </div>

                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/wto.png"  style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
                    </div>

                    <div class ="col-md-3">
                    </div>

    </div>
    <br><br><br><br><br><br>

    <div class="row container" >
            <div> 
                <button class="properbut btn btn-primary col-md-3 fonts" type="submit" style="margin-left: 130px;">Powtórki</button>
            </div>
            <div class="col-md-3" >

                    <p class="text-center fonts" style="margin-top: 7px; font-size: 30px;">Co dzisiaj zrobisz aby osi?gn?? swój cel?</p>

            </div>

            <div> 
                <button class="properbut btn btn-warning col-md-3 fonts"  type="submit">Lekcje audio</button>
            </div>
    </div>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br>

</div>

回答by michaelsangma

CSS Style:

CSS样式：

/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}

HTML:

HTML：

<div class="row row-centered">

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

</div><!-- row -->

enter image description here

enter image description here

This should help you fix it.

这应该可以帮助您修复它。

回答by Boris

Do you need something like this?

你需要像这样？

.row {
    text-align: center;
}
.col-md-1 {
    display:inline-block;
}

回答by Sun

First of all. If you want to have 7 pictures in the center, you need 14 columns! Go to http://getbootstrap.com/customize/#grid-system. The number of the columns is 14. (Or 28 to make a more precise grid-system). Than download it and use this css.

首先。如果你想在中心有7张图片，你需要14列！转到http://getbootstrap.com/customize/#grid-system。列数为 14。（或 28 以制作更精确的网格系统）。比下载它并使用这个css。

In the standard configuration:

在标准配置中：

  • col-xs-... Phones (< 768px). For example col-xs-12 is the complete width in devices < 768px

  • col-sm-... Small devices >= 768px and < 992px. For example col-sm-6 means the half of the devicewidth in this area

  • col-md-... Medium devices Desktops >= 992px and < 1200px

  • col-lg-... Large devices Desktops > 1200px

  • col-xs-... 手机（< 768px）。例如 col-xs-12 是设备的完整宽度 < 768px

  • col-sm-... 小型设备 >= 768px 和 < 992px。例如 col-sm-6 表示该区域设备宽度的一半

  • col-md-... 中型设备桌面 >= 992px 和 < 1200px

  • col-lg-... 大型设备桌面 > 1200px

http://getbootstrap.com/css/#grid-options

http://getbootstrap.com/css/#grid-options

This information you have to know, if you work with Bootstrap. Bootstrap works with offset, so that you don't need to use margin-left, margin-right.

如果您使用 Bootstrap，您必须了解这些信息。Bootstrap 使用offset，因此您不需要使用 margin-left 和 margin-right 。

No need to use

无需使用

display: block;
margin-left: auto;
margin-right: auto;
display: table-cell;

in the class "properbut"!

在类“properbut”中！

http://getbootstrap.com/css/#grid-offsetting

http://getbootstrap.com/css/#grid-offsetting

Instead of <br><br><br>....use padding.

而不是<br><br><br>....使用填充。

Here is a working example with a 14-column-grid:

这是一个带有 14 列网格的工作示例：

CSS

CSS

.properbut {
  height: 180px;
}

.p50 {
  padding: 50px;
}

.jumbotron img {
  height: 60px;
}

.fonts {
  font-family: Georgia,serif;
  color: #4E443C;
  font-variant: small-caps; 
  text-transform: none; 
  font-weight: 100; 
  font-size: 30px;
}

HTML

HTML

<div class="container">
<div class="jumbotron">
  <div class="row text-center p50">

    <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
     <img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" >
   </div>

   <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
    <img src="<?php echo asset_url();?>media/img/kalendarz/wto.png" >
  </div>


  <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
    <img src="<?php echo asset_url();?>media/img/kalendarz/sro.png">
  </div>


  <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
    <img src="<?php echo asset_url();?>media/img/kalendarz/czw.png">
  </div>


  <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
    <img src="<?php echo asset_url();?>media/img/kalendarz/pia.png">
  </div>


  <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
    <img src="<?php echo asset_url();?>media/img/kalendarz/sob.png">
  </div>


  <div class ="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png">
  </div>
</div><!-- row -->


<div class="row p50">
  <div> 
  <button class="properbut btn btn-primary col-xs-10 col-xs-offset-2 col-sm-8 col-sm-offset-3 col-md-5 col-md-offset-0 col-lg-3 col-lg-offset-1  fonts" type="submit">Powtórki</button>
  </div>
  <div class="col-xs-10 col-xs-offset-2 col-sm-8 col-sm-offset-3 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-1">

    <p class="fonts" style="font-size: 30px;">Co dzisiaj zrobisz aby osi?gn?? swój cel?</p>

  </div>

  <div> 
    <button class="properbut btn btn-warning col-xs-10 col-xs-offset-2 col-sm-8 col-sm-offset-3 col-md-5 col-md-offset-0 col-lg-3 col-lg-offset-1 fonts"  type="submit">Lekcje audio</button>
  </div>
</div><!-- row -->

In the firefox browser ctrl+shift+m to test in different screensizes. You can see how it works with the columns and the offsets!

在firefox浏览器中ctrl+shift+m​​在不同的屏幕尺寸下进行测试。您可以看到它如何处理列和偏移量！

回答by nanndoj

I can see you are using vertical-alignproperty. Try also using text-align: center;

我可以看到你正在使用vertical-align财产。也尝试使用text-align: center;

.row {
  text-align: center;
}

相关推荐

HTML 表格 - 最大宽度不适用于 td 后代

HTML 表格 - 最大宽度不适用于 td 后代

在 html 画布上移动图像

在 html 画布上移动图像

Html 禁用身体滚动

Html 禁用身体滚动

Html 将 <div> 或 <span> 放在 <button> 中是否在语义上不正确？

Html 将 <div> 或 <span> 放在 <button> 中是否在语义上不正确？

相关推荐
最近更新
标签