在固定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标签集中在各自的固定div中(所有标签都有宽度:100%以保持其背景颜色: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:

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

/* 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;
}

2 个解决方案

#1

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. Also keep same grid structure as you have for images and of course use text-align: center to each header text.

我认为问题是你为每个标题定位。尝试将所有标题移动到.thumb-page之上的新.conatainer并添加位置:相对于此容器行。同时保持与图像相同的网格结构,当然也使用text-align:center到每个标题文本。

Edid: Working fiddle

艾迪德:工作小提琴

#2

Remove position: fixed; and add text-align: center; to align the text

移除位置:固定;并添加text-align:center;对齐文本

.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 */

#1