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).
I've tried many combinations of CSS tags but haven't been able to sort it out.
Working draft: 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;
}
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.
Edid: Working fiddle
Remove position: fixed; and add 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 */
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.