I want the text (.herotext) to be perfectly in the center vertically and horizontally of the background image (.herobanner). This text is meant to overlay the image just like with a slider/carousel.
I have attempted to do this with the margin: 0 auto but without any results
CSS
.herobanner {
height:500px;
width:100%;background:#000;
background-size:cover !important;
background-repeat: no-repeat;
background: url(../img/head.jpg) center
}
.herotext {
color:#fff;
text-align: center;
margin: 0 auto;
}
HTML
<div class="herobanner">
<h1 class="herotext">Hello</h1>
</div>
One solution
.herobanner {
height: 500px;
width: 100%;
background: #000;
background-size: cover !important;
background-repeat: no-repeat;
background: url(../img/head.jpg) center;
background: lightblue;
display: table;
border: 1px solid grey;
}
.herotext {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="herobanner">
<h1 class="herotext">Hello</h1>
</div>
You always need a wrapper div to vertically position, until CSS gets it's shit together and allows for vertical-alignment in non-table situations.
Plunkr: http://plnkr.co/edit/aaTGmjwYlH5nZzgW4IJL
<div class="herobanner">
<div class="wrapper">
<h1 class="herotext">Hello</h1>
</div>
</div>
Related
I'm trying to create slider backgrounds. Basically create a container and put couple images inside of this container, each image is a responsive background for the whole page. In result we can have multiple backgrounds and a slider to change them. Well if I put all measurement in px than everything is work.but as soon I put in percentage since it suppose to be a responsive design. It get me instead of horizontal scroll a vertical one.
Something like that:
<div class="slider-wrap">
<div class="slide" id="slide-0">
</div>
<div class="slide" id="slide-1">
</div>
</div>
css:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 10px;
color: white;
margin: 0;
padding: 0;
outline: none;
text-decoration: none; /*clear href decoration*/
}
body {
margin: 0px auto;
min-height: 100vh;
}
.slider-wrap {
width:100%;
height:100vh;
min-height: 100vh;
overflow-x: scroll;
}
.slide {
display: inline-block;
width: 100%;
min-height: 100vh;
float:left;
}
#slide-1 {
background-image: url(img/m_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#slide-0 {
background-image: url(img/b_m.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
So how to make a multiple background images with horizontal scroll
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
Link to fiddle: https://jsfiddle.net/ernhep2a/2/
I am trying to center the image and text in the middle of the div. When I do so the text is no longer centered vertically, it drops down. How can one achieve so that the text is centered vertically?
html:
<div>
<div class="secureHome-sessions-top-status0">
<div class="secureHome-sessions-top-status-img0"></div>
Status
</div>
</div>
<div>
<div class="secureHome-sessions-top-status">
<div class="secureHome-sessions-top-status-img"></div>
Status <!-- <-- this is not centered vertically anymore -->
</div>
</div>
css:
div.secureHome-sessions-top-status0 {
float:left;
width: 10%;
margin-left:2%;
height: 20px;
background:lightblue;
}
div.secureHome-sessions-top-status-img0 {
float:left;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
div.secureHome-sessions-top-status {
float:left;
width: 10%;
margin-left:2%;
height: 20px;
background:lightblue;
text-align:center;
}
div.secureHome-sessions-top-status-img {
display:inline-block;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Try adding this CSS to your non-floating thumbs up div:
vertical-align: middle;
When you set the second div to "inline-block" that placed the div in your text string instead of beside it. Since the div is taller than the text, it's stretching the line height and the text just falls in place afterwards. The vertical-align:middle will prevent that by centering your div against the rest of the string.
When you use inline-block, then you make a wrapper which will behave like span and text would always start from the bottom. to fix this issue please use vertical-align:middle in class div.secureHome-sessions-top-status-img issue will get resolve.
But I would recommend you to use all the text and images in separate blocks. It will help you in maintaining the content.
<div>
<div class="secureHome-sessions-top-status0">
<div class="secureHome-sessions-top-status-img0"></div>
<div>this is center</div>
</div>
</div>
<div>
<div class="secureHome-sessions-top-status">
<div class="secureHome-sessions-top-status-img"></div>
<div>this isn't center</div>
</div>
</div>
CSS
<style>
div.secureHome-sessions-top-status0 {
float: left;
width: 20%;
margin-left: 2%;
height: 20px;
background: lightblue;
}
div.secureHome-sessions-top-status-img0 {
float: left;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: middle;
}
div.secureHome-sessions-top-status {
float: left;
width: 20%;
margin-left: 2%;
height: 20px;
background: lightblue;
text-align: center;
}
div.secureHome-sessions-top-status-img {
display: inline-block;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: middle;
}
</style>
In img0 you're using float. Float elements are not in the page page normal "flow". So when you use float the image is not interfering to the text.
you could try vertical-align but that probably will dislocate the image a bit.
It will be better if you wrap the image and the text in a separated div and just center that div then you can make the float with no problem.
div.secureHome-sessions-top-status0 {
float:left;
width: 10%;
margin-left:2%;
height: 20px;
background:lightblue;
}
div.secureHome-sessions-top-status-img0 {
float:left;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.in-center {
display: inline-block;
}
div.secureHome-sessions-top-status {
float:left;
width: 30%;
margin-left:2%;
height: 20px;
background:lightblue;
text-align:center;
}
div.secureHome-sessions-top-status-img {
float: left;
width: 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
<div>
<div class="secureHome-sessions-top-status0">
<div class="secureHome-sessions-top-status-img0"></div>
Status
</div>
</div>
<div>
<div class="secureHome-sessions-top-status">
<div class="in-center">
<div class="secureHome-sessions-top-status-img"></div>
Status
</div>
</div>
</div>
http://jsfiddle.net/8hmwojk5/
This is probably better suited as a comment as it does not answer the question within the constraints presented, but I am not yet able to leave comments; nonetheless, I hope it is helpful.
If you are able to use Flexbox, this sort of layout becomes trivial to implement.
.container {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
background: lightblue;
margin: 0.5rem;
padding: 0 0.5rem;
width: 20%;
}
.icon {
flex: 0 0 20px;
height: 20px;
background: red;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.text {
padding: 0 0.5rem;
}
<div class="container">
<div class="icon"></div>
<div class="text">This is centered.</div>
</div>
I want to place a 100px x 100px image in the middle of a 210px width div. Please help. 1em=10px
#sidebox > .centered {
text-align: center;
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
position: absolute;
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url();
}
<div id="sidebox">
<p>
<div class="centered"></div>
</p>
You can align your image <img> center of outer div by below property's
margin:0 auto; OR this only works for aligning text or image text-align:center;
Might you just need to centre align 100x100px image in 210px width wrapper.
You can centre align inline element using text-align:center;
HTML
<div id="sidebox">
<img width="100px" height="100px" src="https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg"/>
</div>
CSS
#sidebox{
width: 210px;
text-align:center;
background: #eee;
}
JSFIDDLE DEMO
The most important point, mentioned by others, is that text-align:center must apply to the to the box the image is being centered in, not the image itself.
You have other problems:
position:absolute will shrink the effective image width to zero for centering purposes, so the left edge will be centered.
You are using a <div> like an <img>, but it won't center like an <img> unless it is styled with display:inline-block.
Before & After:
Before:
#sidebox {
font-size:10px; /*ADDED so 1em=10px*/
width: 210px; /*ADDED*/
border: 2px dashed red; /*ADDED*/
}
#sidebox > .centered {
text-align: center;
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
position: absolute;
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
}
<div id="sidebox">
<p>
<div class="centered"></div>
</p>
***TEXT ADDED***
</div>
After:
#sidebox {
font-size:10px;
width: 210px;
border: 2px dashed red;
text-align: center; /*ADDED*/
}
#sidebox > .centered {
display:inline-block; /*ADDED*/
/*text-align: center; REMOVED*/
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
/*position: absolute; REMOVED*/
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
}
I'm attempting to make a header with the div's centered with a logo in the middle. With the Logo div hanging over, which I've successfully done. I can not however figure out how to place the logo div in the middle of the link divs for the life of me.
Any help would be appreciated, google searching hasn't gotten me any luck, but I'm not sure I know what to search for. I'm not good at making things look pretty normally :(
Page Layout:
Header (overlay)
Content (z-index: -1)
Image of site without a float declared on .headerLogo
Image of site with float: left declared on .headerLogo
html:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
css:
*{
margin: 0;
}
body,html{
background-color: #000;
color: #FFF;
text-align: center;
font-family: calibri;
height: 100%;
overflow:auto;
}
.header{
top:0;
height: 100px;
line-height: 100px;
width: 100%;
display: inline-block;
border-bottom: lime 10px solid;
margin:0;
position: static;
background-color: #000;
font-size: 24px;
}
.headerLink{
display: inline-block;
float: center;
margin-left: 60px;
margin-right: 60px;
margin-top: 0px;
margin-bottom: 0px;
}
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: auto;
margin-right: auto;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
}
.content{
z-index: -1;
float: left;
text-align: center;
min-height: 100%;
width: 100%;
margin-top: -110px;
margin-bottom: -50px;
background-color: #333343;
}
You've got a couple ways to go about this. I think the easiest way is to use a fake placeholder to make the horizontal space between menu items in the middle, then have the logo be absolutely positioned on top.
HTML:
<div class='header'>
<div class='headerLink'>Home</div>
<div class='headerLink'>Contact</div>
<div class='headerLogo'></div>
<div class='headerLink headerLogoFake'></div>
<div class='headerLink'>Menu</div>
<div class='headerLink'>Connect</div>
</div>
<div class='content'>
</div>
CSS:
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
background-color: lime;
color: lime;
width: 200px;
height: 200px;
line-height: 100px;
position:absolute;
top:0;
left:50%;
margin-left:-100px;
}
.headerLogoFake {
width:200px;
}
As you probably know, if you just leave it as you have, without the float, it'll be in the middle, but it'll push the green bottom border down. This will place a fake empty thing in the middle, but at the same height as the menu items, so won't push it down. It'll add the logo in on top.
Working Fiddle
.headerLogo{
position:absolute;
display: inline;
float: left;
left 50%
position: static;
background-image: url('/images/logo.jpg');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: -50px;
margin-right: auto;
background-color: lime;
color: lime;
width: 100px;
height: 100px;
line-height: 100px;
}
Your mark-up provided did not produce the result you were looking for, so I applied the bare minimal styling to accomplish what you are asking for.
Most importantly float:center; does not exist.
If you give elements a property of display:inline-block;, then you can use text-align:center; around the container to center all of the elements.
.header {
text-align:center;
}
.headerLink {
display:inline-block;
padding:10px;
}
.headerLogo {
display:inline-block;
height:100px; width:100px;
background:red;
margin:0px 10px;
}
Then, to line them up with your logo, vertically, give them a vertical-align:top property and set the margin to near half the width of the logo
http://jsfiddle.net/5V29a/1/ - UPDATED DEMO