col-md-4 中的居中文本

Question

How can I center (horizontally and vertically) the text inside <p> , inside a col-md-4 --> row --> bootstrap.如何将<p>内的文本居中（水平和垂直），在 col-md-4 --> 行 --> 引导程序中。

My code is the next:我的代码是下一个：

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

I tried css with <p> tag,我用<p>标签尝试了 css，

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

And it's not working.它不起作用。

I tried another css as well:我也尝试了另一个 css：

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

But I just got a horizontally centering但我只是得到了一个水平居中

Answer 1

You can do it with Flexbox :你可以用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 */
}

Basic CSS browser reset:基本的 CSS 浏览器重置：

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

Answer 2

you can just add : style="text-align: center;"你可以添加：style="text-align: center;" like this:像这样：

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

or you can add extra class to the div and add in the css style like this:或者您可以向 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>

col-md-4 中的居中文本

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-10-17 11:44:19

解决方案2
0 2017-10-17 11:52:20

col-md-4 中的居中文本

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-10-17 11:44:19

解决方案2 0 2017-10-17 11:52:20

解决方案1
2 已采纳 2017-10-17 11:44:19

解决方案2
0 2017-10-17 11:52:20