在 col-md-4 中居中文本答案

【问题标题】：Center text in col-md-4在 col-md-4 中居中文本
【发布时间】：2018-03-29 01:47:58
【问题描述】：

如何将<p> 中的文本居中（水平和垂直）在 col-md-4 --> row --> bootstrap 中。

我的代码是下一个：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p>&copy; @DateTime.Now.Year - Videoclub</p>
        </div>
        <div class="col-md-4">
            <div class="pull-right">
                <h5 style="text-align: center;"><u><i>Informacion</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#">Acerca de Nosotros</a></li>
                    <li><a href="#">Contactanos</a></li>
                    <li><a href="#">Ubicacion</a></li>
                    <li><a href="#">Trabaja con Nosotros</a></li>
                    <li><a href="#">Prensa</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pull-right">
                <h5 style="text-align: center;"><u><i>Social</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="FB" /></a></li>
                </ul>
            </div>
        </div>
     </div>
</div>

我尝试了带有<p>标签的css，

text-align: center;
vertical-align: middle;
display: table-cell;

它不起作用。

我也尝试了另一个 css：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

但我只是水平居中

【问题讨论】：

text-align: center 应该可以使任何块元素内的文本居中，只要该元素不浮动即可。关于垂直对齐，请确保您没有在 p 元素上设置默认或供应商样式 margin 规则并调整 line-height
p 和div 没有自己的高度，它们从文本中获取高度。但是如果没有 row、div、col-md-4 和 p 的 css，很难说什么是最好的改变。
为
设置固定高度可以垂直解决问题，但不能水平解决问题@Caaris
我没有使用供应商样式，只是引导... @UncaughtTypeError
供应商样式是默认浏览器样式，无论您是否愿意，最终都会使用它们（感谢浏览器！），这就是为什么重置默认浏览器样式可以帮助否定这些供应商样式。

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以使用 Flexbox：

.container > .row > .col-md-4:first-child {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* horizontally centered */
  align-items: center; /* vertically centered */
}

基本 CSS 浏览器重置：

* {margin: 0; padding: 0; box-sizing: border-box}

【讨论】：

【解决方案2】：

你可以添加：style="text-align: center;" 像这样：

  <div class="col-md-4" style="text-align: center;" >
   <p>&copy; @DateTime.Now.Year - Videoclub</p> </div>

或者你可以在 div 中添加额外的类并像这样添加 css 样式：

.extraClass{
text-align:center;
vertical-align:central;
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
       <div class="container">
    <div class="row">
        <div class="col-md-4 extraClass">
            <p>&copy; @DateTime.Now.Year - Videoclub</p>
        </div>
        <div class="col-md-4">
            <div class="pull-right">
                <h5><u><i>Informacion</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#">Acerca de Nosotros</a></li>
                    <li><a href="#">Contactanos</a></li>
                    <li><a href="#">Ubicacion</a></li>
                    <li><a href="#">Trabaja con Nosotros</a></li>
                    <li><a href="#">Prensa</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3">
            <div class="pull-right">
                <h5><u><i>Social</i></u></h5><br />
                <ul class="list-unstyled">
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="FB" /></a></li><br />
                    <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="FB" /></a></li>
                </ul>
            </div>
        </div>
     </div>
</div>
    </form>
</body>
</html>

【讨论】：

你也可以在 div 中添加属性：vertical-align:central;