I have the following div:
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
<a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
</div>
and I want the text and button to appear centred within the div. Currently it appears like so:
and I am having no luck getting to centre. Here is the css for the transparent-panel
div:
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
height: 100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
I tried using position: relative;
on the div and then position: absolute;
on the h3
and a
tag but that didn't work.
If anyone can help me out it would be much appreciated. I am using Bootstrap 3.
Here is a bootply demo http://www.bootply.com/sQ5gyYn7Ru
One way to do it would be to wrap the panel in a container, put the background color on the container and then use a few lines of CSS to vertically center the panel within the container:
HTML:
<div class="panel-container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
<a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
</div>
</div>
CSS:
html,body {
height:100%;
}
.panel-container {
height:100%;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
padding: 40px 20px 40px 20px;
width: 100%;
text-align:center;
/* Code to vertically center below */
position: relative;
top: 50%;
transform: translateY(-50%);
}
I find it useful to set the container div as display: table
, and wrap the content in a inner div set as display: table-cell
.
Then you can use the vertical-align
property:
/* CSS used here will be applied after bootstrap.css */ .teachers-image { background-size: cover; height: 418px; color: #ffffff; } .transparent-panel { padding: 0 20px; display: table; width: 100%; height: 100%; background: rgba(51, 153, 51, 0.7); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)"; } .transparent-panel > div { display: table-cell; vertical-align: middle; } .btn-white-big { background-color: #ffffff; height: 50px; color: #339933; font-size: 18px; font-weight: 500; line-height: 30px; @include add-border(3px, white, all); @include border-radius(30px); &:hover, &:focus, &.focus { background-color: #339933 !important; color: white; } }
<div class="teachers-image"> <div class="transparent-panel"> <div> <h3>We asked some of our supports the following questions</h3> <a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a> </div> </div> </div>
Use a container with View Height for top to bottom centering:
height: 100vh;
The View Height will always use the windows display height.
HTML:
<div class="container">
<div class="transparent-panel">
<h3>We asked some of our supports the following questions</h3>
<a href="#" class="button btn btn-white-big video-button-two">WATCH VIDEO</a>
</div>
</div>
CSS:
.container {
height: 100vh;
background: rgba(51, 153, 51, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#75FFFFFF, endColorstr=#75FFFFFF)";
}
.transparent-panel {
width: 100%;
text-align:center;
position: relative;
top: 50%;
}
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.