在固定div中将文本水平居中

Question

我正在尝试将四个h4标签放在其各自的fixed div中居中（全部width: 100%以保持其background-color: rgba(255, 255, 255, 0.5);跨整个浏览器宽度）。

我尝试了CSS标记的许多组合，但无法对其进行梳理。

工作草案： 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;
}

Answer 1

我认为问题是每个标头都固定位置。 尝试将所有标头移动到.thumb-page上方的新.conatainer并添加position: relative于此容器行的position: relative .thumb-page 还应保持与图像相同的网格结构，并且当然要使用text-align: center每个标题文本的text-align: center 。

埃迪德：工作小提琴

Answer 2

拆卸位置：固定； 并添加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 */