Ok, so I'm fighting with vertical alignment and on the verge of mental collapse. My hacky solution finally seems to work otherwise, but Chrome fucks up the baseline somehow.
Here's the fiddle:
https://jsfiddle.net/53272b1v/10/
Here's the pasted code:
<div class="outer">
<div class="img"></div>
<div class="main">
<div style="display:flex;height:100%;align-items:center;">
VITTUSAATANA
</div>
</div>
</div>
css:
div.outer{
}
div.main{
height:51px;
display:inline-block;
border:1px solid red;
}
div.img{
background-image:url("https://digiluovuus.files.wordpress.com/2010/04/media_httpkotiwelhoco_cfizk-scaled5001.jpg?w=409&h=517");
background-size:100%;
width:41px;
height:51px;
display:inline-block;
}
Works fine with firefox, but on Chrome (fresh version that seems to have hidden the version number to a place I can't be arsed to search).
The text should be aligned to the middle of the picture and middle of its parent element + the parent should be in line with the picture. This is what I'm seeing with Firefox.
But on Chrome, the text's parent element is dragged down so that the text is aligned to the bottom of the image.
.img and .main need to be display:inline-block and the solution should involve only touching the main element + it's children.
I think your problem is for mixing flexbox with inline-block elements. The solution is remove the flexbox and adding vertical-align. It will be working in all browsers:
https://jsfiddle.net/53272b1v/11/
div.main,
div.img{
vertical-align:top;
}
EDIT
Just add the vertical-align property:
https://jsfiddle.net/53272b1v/14/
Just add float: left; it worked in Chrome too...
<div style="display:flex;height:100%;align-items:center;float:left;">VITTUSAATANA</div>
I have the following CSS and HTMLcode:
CSS
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="table">
<div class="table-cell">
<a class="cta cta-1" href="#">Shop Now</a>
</div>
It centers the text vertically correctly on desktop, but I tried viewing it on my mobile (IPhone) and it doesn't work, the text is aligned to the top. Why would that be? You can see it here.
http://machinas.com/wip/stradviarius/startpage/
If your using fixed content that won't change you could do it using:
.table-cell{
display: table-cell;
margin-top:170px;
}
OR use line-height for the text (probably best):
.cta {
line-height:339.328px;
}
339.328px is from your div heights.
Note: Your website doesn't vertical center the text on my Chromebook, so I assume it isn't working.
I have two <p> elements inside a <div> element, and want to position them at the center of the <div> element. e.g.
<div id="mydiv">
<p class="above">some text</p>
<p class="below">other text</p>
</div>
Note: the <div> element itself is not positioned at the center of the browser window, so the positioning of <p> elements is only relative.
text-align: center;
for text.
margin: 0 auto;
for block level elements like a div.
EDITED:
Add following css rules in #mydiv
display:table-cell;
vertical-align:middle;
Like This
#mydiv{
position:relative;
border:1px solid #000;
width:400px;
height:300px;
display:table-cell; /* Added rule - Note: IE8+, Firefox, Chrome, Opera, Safari */
vertical-align:middle; /* Added rule */
}
#mydiv p{
text-align:center;
}
UPDATED DEMO
text-align: center;
It's worked for me.
You may try;
margin-left:auto;
margin-right:auto;
to your p
Here is a Live Demo
If you want to center both vertically and horizontally, you may try Dead Center
Here is a demo showing centering a div Both Vertically and Horizontally
I need to make a background for a website cover the entire screen, BUT tile vertically. I cant use HTML5. Here is the website, sorry the code is messy I wrote the original code a few years back when I didnt know how to right organized code.
the problem with using CSS background-image with the repeat-y option is that the image won't fill the width of the screen.
To get the image to fill the width and ALSO tile vertically do the following.
I've tested and it works.
Remove the current <div class="background"> block containing your background images
Add the following code block to the <center> element you have on your page
<center style="">
<div class="background">
<img src="BG/b1.jpg" />
<img src="BG/b1.jpg" />
<img src="BG/b1.jpg" />
</div>
...rest of code
now add/modify the following CSS statements
center
{
position:relative;
}
.background
{
height:100%;
width:100%;
min-height:800px;
min-width:760px;
position:absolute;
overflow:hidden;
left:0px;
top:0px;
z-index:-1;
}
.background img
{
display:block;
height:auto;
width:100%;
min-height: 800px;
min-width:760px;
}
In your CSS use background-repeat:repeat-y to repeat vertically. Use background-repeat:repeat to repeat vertically and horizonally.
http://www.w3schools.com/cssref/pr_background-repeat.asp
CSS
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
Here's a solution that I believe is what you're looking for. You can also use a length (e.g., 50px) instead of auto for the height.
#background {
background-image:url("image.png");
background-size:100% auto;
background-repeat:repeat-y;
}
Working Example
Horizontal Stretch + Vertical Repeat Base64 Background (tested in Firefox 11 and Chrome)
Browser Support
Firefox 4+ (3.6 if you include -moz-background-size)
Safari 4.1+ (3.0 if you include -webkit-background-size)
Chrome
Opera 10+ (9.5 if you include -o-background-size)
Internet Explorer 9+ (non-resized background for IE8 and lower)
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.