This question already has answers here:
Vertically center text in a 100% height div?
(13 answers)
Closed 8 years ago.
My div height is 100%, but when I do this I don't know how I can vertically center a P-tag in the center.
How do I do this?
HTML:
<div>
<p>This text has to be vertically centered.</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
background: url(http://www.windsim.com/images/sky/sky_107.bmp) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p {
font-family: "Times New Roman", Times, serif;
color: black;
text-align: center;
font-size: 65px;
}
One way is to use the method outlined below, note that the body & html styles are optional, used to create a better illustration in the provided fiddle.
The crux is the fact the <p> will need to be contained within a parent element, and both will need the styles outlined below.
Fiddle
HTML
<div>
<p>text</p>
</div>
CSS
html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}
div {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
p {
display: table-cell;
vertical-align: middle;
}
I'd also recommend you have a look at some of the alternative approaches shown here
Related
CSS:
.jumbotron{
background: url("jumbotron.jpg") no-repeat center center;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
background-size: 70%;
margin-top: 0 auto;
}
.push-spaces {
height: 550px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting .glyphicon {
font-size: 4em;
}
HTML:
<div class="jumbotron">
<div class="container-fluid push-spaces">
</div>
</div>
Viewable on voiddevelopment.com
It seems as though whenever I shrink the page to the width of the phone, the image gets a ton of padding on the top and bottom, making it look like there's a lot of white space.
Looks like background-align automatically centers if you do not specify a value.
You centered you background-image in the center center, it means that you background-image situated in the vertical and horizontal center of your block. So, the solution is just remove one center. Like this background: url("jumbotron.jpg") no-repeat center; - in this case you just center background-image in horizontal.
I'm working in visual studio with the following code,
however, the URL images refuse to center in the columns like the h2 tags did.
ive tried multiple options such as
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-position: center center;
background-repeat: no-repeat;
also
background: url('http://i59.tinypic.com/314uzyb.jpg') center center;
background-repeat: no-repeat;
here is what it currently looks like. As you can see, my h2 tags are centered with the columns. however, the images are still left bound.
here is the full section of code:
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
#*EDIT________________BUTTON1 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
</style>
#*END BUTTON#1_____________________________________*#
</div>
<div class="col-md-4">
<h2 style="text-align: center;">Version 2.0</h2>
#*EDIT________________BUTTON2 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*#
<style type="text/css">
.urlImg2 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://i59.tinypic.com/314uzyb.jpg');
background-repeat: no-repeat;
}
.urlImg2:hover {
background-image: url('http://i60.tinypic.com/rmp4pv.jpg');
}
</style>
#*END BUTTON#2_____________________________________*#
</div>
It's because you're trying to center the image while the element is as wide as the image. In other words, the image is centered it's just that the element is as wide as the image which makes it appear not centered.
Examples
http://jsfiddle.net/ey0upzw1/
width: 500px; /* Equal to col width */
http://jsfiddle.net/ey0upzw1/1/
width: 200px; /* Not equal to col width */
Solutions
Settings the image to margin: auto.
Adding text-align: center to col-4 instead of only on the h2, you also have to set the image to inline-block instead of block.
You need to center the link.
Since it has a defined width, you can do that with margin:auto.
.urlImg1 {
width: 200px;
height: 200px;
display: block;
background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
background-repeat: no-repeat;
margin: auto;
}
.urlImg1:hover {
background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}
<div class="col-md-4">
<h2 style="text-align: center;">Version 1.0</h2>
</div>
I am trying out responsive layout with 100% div wrapper and then placing a background image with text above and below it.
Unable to get it to display.
Looking to get the image to resize with browser window.
What am I doing wrong?
.wrapper {
width: 100%;
}
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
.text {
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/
Looks like you need to give height and width to your .image element. As well as a height to your wrapping div.
u need to set the content in middle div or give height. because initial div does nt have any height so how can u see the background??
check the fiddle-
--HTML--
<div class="wrapper">
<div class="text">Give the height to below div!</div>
<div class="image"></div>
<div class="text">So, here u have ur photo</div>
</div>
--CSS--
.image {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
height:100px;
}
You're .image is actually 0px heigh, that's why the image is not displayed.
Check out this :
just moved the .image code into the .text code :
.text {
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
text-align: center;
font-size: 50px;
color: yellow;
}
http://jsfiddle.net/f5F6T/1/
Edit :
.image {
height: 30px;
background: url("http://upload.wikimedia.org/wikipedia/commons/3/35/Rivi%C3%A8re_Coulonge_Pont_Davidson_1024x768.JPG") no-repeat center;
background-size: cover;
}
http://jsfiddle.net/f5F6T/3/
First, my HTML markup:
<nav>
<section class="navabout">
ABOUT
</section><section class="navphotography">
PHOTOGRAPHY
</section><section class="navdesign">
DESIGN
</section>
</nav>
And my CSS code for it:
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
nav > section{
width: 33%;
height: 100%;
display:inline-block; /*http://stackoverflow.com/q/11805352/1584286*/
font-size: 60px;
font-family: 'Bebas Neue', arial, helvetica, sans-serif;
}
nav > section.navabout{
background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
background-size: cover;
text-align: left;
}
nav > section.navphotography{
background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
background-size: cover;
text-align: center;
vertical-align: text-bottom;
}
nav > section.navdesign{
background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
background-size: cover;
text-align: right;
}
Question
I want the Photography font stick at the bottom of the section. So I found the CSS code vertical-align and read this article by CSS-Tricks. There is written the following:
In order for this to work, the elements need to be set alone a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set by the display property) elements.
So it should work in my code, then CSS-Tricks also say:
text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
But strangely, the other two sections' font are sticking to the bottom WITH the background image (so the whole section tag sticks to the bottom).
I thought, maybe it won't work because of the parent element font. So I set the value to bottom. But now nothing changed.
Can you help me to let the font of the Photography section stick to the bottom (only the font!)
PS: and yes I know, this CSS won't work in IE6 & 7, but my whole site will only work in modern browsers.
Codepen Demo for you
How about this for an alternative approach:
FIDDLE
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<div>ABOUT</div>
</div>
<div class='cell'>
<div>PHOTOGRAPHY</div>
</div>
<div class='cell'>
<div>DESIGN</div>
</div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
}
.table {
display:table;
width:100%;
height:100%;
font-size: 60px;
font-family:'Bebas Neue', arial, helvetica, sans-serif;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
text-align: left;
position:relative;
}
.cell:nth-child(1) {
background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(2) {
background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
background-size: cover;
}
.cell:nth-child(3) {
background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
background-size: cover;
}
.cell > div {
position:absolute;
bottom:0;
}
This is my website coding and I am already running into problems, please help!
This is my CSS style sheet:
.center {
position: absolute;
left: 50%;
}
body
{
background-color: #45a8e1;
background-image:url('images/background.png');
background-repeat:repeat-x;
}
And then here is the HTML:
<body>
<div id="header" class="center">
<img src="images/header.png">
</div>
</body>
The final results are coming okay but the page is extremely wide. I am trying to fit my background image in the view-port (page). Also, I want to center my div in the center which doesn't seem to be working since the page is so wide.
Use this css:
.center {
display:inline-block;
margin: 0 auto;
}
body
{
width: 100%;
text-align: center;
background-color: #45a8e1;
background:url('images/background.png');
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
background-repeat:repeat-x;
}
Note: background-size is not supported in IE8 and below.
Try this -jsFiddle
#header {
background: url('/*yourImageHere*/') repeat-x center;
height:200px;
width:100%;
}