Question

如何将<p>内的文字居中（水平和垂直）居中于col-md-4 - ＆gt;行 - ＆gt;自举。

我的代码是下一个：

<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%);

但我只是一个水平居中的

Answer 1

您可以使用 Flexbox 执行此操作：

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

基本CSS浏览器重置：

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

Answer 2

你可以添加：style =＆＃34; text-align：center;＆＃34; 像这样：

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

或者您可以在div中添加额外的类并添加css样式，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

col-md-4中的中心文本

2 个答案: