[英]Center text horizontally in fixed div
I'm trying to center four h4
tags within their respective fixed
divs (all with width: 100%
to keep their background-color: rgba(255, 255, 255, 0.5);
spanned across the whole browser width). 我正在尝试将四个
h4
标签放在其各自的fixed
div中居中(全部width: 100%
以保持其background-color: rgba(255, 255, 255, 0.5);
跨整个浏览器宽度)。
I've tried many combinations of CSS tags but haven't been able to sort it out. 我尝试了CSS标记的许多组合,但无法对其进行梳理。
Working draft: http://parkerrichard.com/new/art.html 工作草案: http : //parkerrichard.com/new/art.html
HTML: HTML:
<!-- row 1: body -->
<div class="container thumb-page">
<div class="row thumb-col mb">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">PAINTING</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm">PAINTING</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">DRAWING</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">DRAWING</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">DIGITAL</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">DIGITAL</h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="fix"><h4 class="hidden-xs">VIDEO</h4></div>
<h4 class="centered hidden-lg hidden-md hidden-sm mt-sm">VIDEO</h4>
</div>
</div>
</div>
CSS: CSS:
/* Thumbnail section */
.thumb-col .fix {
position: fixed;
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
width: 100%;
}
.thumb-col h4 {
letter-spacing: 2px;
}
.thumb-col .fix h4 {
margin-top: 0px !important;
margin-bottom: 15px !important;
}
.thumb-col div a img {
margin: 0 auto !important;
display: block;
width: 200px;
}
I think the problem is that you make fixed position per header. 我认为问题是每个标头都固定位置。 Try to move all headers to new
.conatainer
above .thumb-page
and add position: relative
to this container row. 尝试将所有标头移动到
.thumb-page
上方的新.conatainer
并添加position: relative
于此容器行的position: relative
.thumb-page
Also keep same grid structure as you have for images and of course use text-align: center
to each header text. 还应保持与图像相同的网格结构,并且当然要使用
text-align: center
每个标题文本的text-align: center
。
Remove position: fixed; 拆卸位置:固定; and add text-align: center;
并添加text-align:center; to align the text
对齐文字
.thumb-col .fix {
position: fixed; - /* delete this */
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
width: 100%;
text-align: center; /* Add This */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.