以col 4为中心的文本
以col 4为中心的文本
提问于 2017-10-17 11:22:25
我如何在<p>内部(水平和垂直)将文本居中，在一个col-md-4 ->行->引导内。
下面是我的代码：
<div class="container">
<div class="row">
<div class="col-md-4">
<p>© @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%);但我刚刚得到了一个水平中心
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-17 11:44:19
您可以使用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}Stack Overflow用户
发布于 2017-10-17 11:52:20
您只需添加:style=“文本对齐:中心”，如下所示：
<div class="col-md-4" style="text-align: center;" >
<p>© @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>© @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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46788955
复制相关文章
相似问题
腾讯云开发者
