How do you vertically centered a text in the middle of a banner container with image tag?
My search result is using display:table/display:table-cell or display:inline-block but those solution didn't work when we have image tag.
I think I have to have position absolute for text but then how to make sure it's always vertically and horizontally centered when re-sizing window?
Here is html:
<div class="banner">
<img class="" src="http://placehold.it/1440x410">
<div class="container">
<div class="banner-text">
<h1>Header Text</h1>
<h3>Sub Header Text</h3>
CTA
</div>
</div>
</div>
and Css as below:
.banner{
width: 100%;
position: relative;
}
.banner img{
width: 100%;
}
.container{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.banner-text{
position: absolute;
top: 50%;
left: 50%;
}
http://codepen.io/neginbasiri/pen/grEmMx
I am wondering whats your solution for this?
Thanks
just add this transform to the class listed here:
.banner-text{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); /* or of course - translate(-50%, -50%); */
}
Fork Demo
Check out this guide for more info: Centering in CSS
The most concise way to do what you need is the following:
.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add me */
}
Related
My spinner is in the middle of the screen after a second of loading the page. But at the first frame of the page, it is not centered, instead it is positioned on the top-left of the page. How to make sure my spinner is centered from the start? I do not have problems centering the loader. I just need to make sure my spinner starts in the middle of the page. I already looked for similar problems but they are not the same. Here is my css.
.loader {
/*left: 50%;
position: fixed;
top: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 999;*/
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
html:
<div class="loader">
<img src="../../../../assets/content/Amsa-loading.gif">
</div>
Try
<div class="app_loader"></div>
.app_loader{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What I do to make this work is use a background instead of img tag:
.loader{
height:100%;
width:100%;
background:url(/design/images/loader.gif) no-repeat center center;
position:absolute;
z-index:10;
}
then for the HTML:
<div class="loader"></div>
then in my site's CSS, hide the div when the CSS is loaded.
.loader{display:none;}
I want to display my page's title, "Math Achievement Tutoring", over a photograph of a hiker. My first attempt was to create this html:
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
with this CSS, the idea being to position the h1 as absolute:
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
but this means the title is no longer centered. I may run into other trouble as well if I start to fiddle with margin and padding.
h1 {
text-align:center;
position: absolute;
color: #a04040;
}
<div id="wrapper">
<header>
<h1>Math Achivement Tutoring</h1>
</header>
<div id="hero">
<img src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" alt="" width="500">
</div>
</div>
What are my options for achieving this, and does it depend on where I want to take this website eventually? (like adding a navigation menu below the image)? Is there any simple demonstration code?
First, add position relative to #wrapper, then :
if you want it to be vertically & horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
if you want it to be vertically centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
top: 50%;
transform: translateY( -50% );
}
if you want it to be horizontally centered
h1 {
text-align:center;
position: absolute;
color: #a04040;
left: 50%;
transform: translateX( -50% );
}
Just as Loesh Gupta says: make the wrapper .wrapper { position: relative; }. To center the text you can use multiple options. I'd go with something like this:
h1 { position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%); }
I can also recommend this tool: http://howtocenterincss.com/
Here's a solution using flexbox:
#wrapper {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
position: relative; /* establish neares positioned ancenstor for absolute positioning */
}
h1 {
color: red;
}
.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.center-aligned {
display: flex;
align-items: center;
justify-content: center;
}
<div id="wrapper" class="center-aligned">
<img class="background-image" src="http://michaelmossey.com/demo/home-hiker-grayish.jpg" />
<div class="text"><h1>Math Achivement Tutoring<h1></div>
</div>
Using a background image on a div and a display flex on the text might do it. Make sure to add the height on the text based on the image so it can be centered.
*{margin: 0 auto;}
.bg{
background-image:url('http://michaelmossey.com/demo/home-hiker-grayish.jpg');
height: 380px;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
.bg h1{
display: flex;
justify-content: center;
align-items: center;
height: 380px;
font-size: 3em;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
}
<div class="bg">
<h1>Math Achivement Tutoring</h1>
</div>
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.
I'm trying to vertically align the first div at the center of the browser and everything below it below that div.
I may be able to wrap these two divs in another div and centering that div may work, but I can't change this html structure and have to achieve with two divs only. The first div is a dynamic container where different html will be displayed. The second div is static.
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Add width and margin: auto 0 to the css class and apply it to the div elements.
like this:
.center {
margin: 0 auto;
width: 200px;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>
This should work (I added the color only to make it easier to see the result)
.center {
width:750px;
margin-left: auto;
margin-right: auto;
background-color:Red;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Summary:
You can use this code that is in the jsfiddle.
I wrote two classes named .center-x and .center-y. You can use these classes when you want to center elements by x and y axes.
The code:
.box-1 {
background: #00adef;
padding: 5px 10px;
}
.box-2 {
background: #ccc;
padding: 5px 10px;
position: absolute;
top: 100%;
width: 170px;
}
.center-y {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-x {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-x.center-y {
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="box-1 center-y center-x">
I'm at the center of the Browser!
<div class="box-2 center-x">I'm just below the center!</div>
</div>
And if you want to center by vertical, just remove the .center-x class from .box-1. Else if you want to center by horizontal, just remove the .center-x class from .box-1.
If the browser supports viewport units, you can use this way:
.center {
position: relative;
left: 0;
margin-top:50vh;
}
See it working: http://jsfiddle.net/fgpqkrr4/
How to center align img with absolute positioning in div or table cell if I dont know width of image?
for example
<div style="position: relative">
<img style="position: absolute" />
</div>
Aligns the element horizontal and vertical to the relative parent.
<div style="position: relative">
<img class="centered" />
</div>
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
'top' and 'left' set to 50% will center the top-left-corner of the element. Translating is by -50% for both X and Y sets the element to the exact center of the parent.
For browser support take a look here:
Translate2d - caniuse.com
You can use the negative margin trick, assumed you know the dimensions of the image:
img{
top:50%;
left:50%;
margin-left : -(<imagewidth>/2)px;
margin-height: -(<imageheight>/2)px;
}
when you only target browsers which support the calc() feature you could do:
img{
top: calc(50% - <imagewidth>/2px);
left: calc(50% - <imageheight>/2px);
}
When the browser supports translation you can translate it -50% of the image-dimensions:
img{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
If none of that is possible, your last resort is altered markup and display:table:
<div>
<div>
<img />
</div>
</div>
div{height:100%;width:100%;
display:table;
text-align: center;
vertical-align: middle;}
div>div{
display:table-cell;
}
see Demo for latest case
img {
display: block;
margin: 0 auto;
}
Check this JSFIDDLE1
or
div {
position: relative;
text-aligm: center;
width:2000px;
}
img {
position: absolute;
}
Check this JSFIDDLE2
Simple way to center an image vertically
if you know the height of div. then you can do image as vertical align.
div{
text-align:center;
height:150px;
line-height: 150px;
}
img{
vertical-align: middle;
}