I know this has been asked many times but I can't find an answer that works for me. This is for several webpages so the images are not all the same size. I have tried vertical-align, table-cell, line-height and everything else that's been mentioned.
html: http://www.joekellywebdesign.com/UpdatedSite/services.html
<div id="contentright">
<img src="images/internet.jpg">
</div> <!-- end of contentright div -->
CSS: http://www.joekellywebdesign.com/UpdatedSite/css/styles.css
#contentright {
float: right;
background-color:#FFF;
width: 450px;
height: 350px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 350px;}
Use vertical-align: middle; on the img - I tried it via the F12 dev tool in Chrome, and it worked.
#contentright img {
vertical-align: middle;
}
This works because the parent is set to display:table-cell, and has vertical-align: middle
jsFiddle here
Related
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/
you can see the issue in Safari on this page: http://mknepprath.com/lab/pyrus/safari_bug.html
The "See Our 2015 Graduation Lookbook" section is vertically centered in every browser except this one. I've tried quite a few ideas I've found on here, but nothing seems to work... Here's a codepen with the example below: http://codepen.io/mknepprath/pen/WbBWBQ
Here's my SSCCE:
<style>
.square {
width: 34%;
height: 0;
padding-bottom: 30%;
float: left;
position: relative;
background: red;
}
.table {
display: table;
position: absolute;
min-height: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.content {
width: 200px;
height: 20px;
background: yellow;
}
</style>
<div class="square">
<div class="table">
<div class="table-cell">
<div class="content"></div>
</div>
</div>
</div>
I want the square to scale proportionally when the browser width is decreased, so I'm currently using a padding technique, where the height of .square is set to 0, and the padding bottom is set with a percentage. An example of this is the second answer here: How to style a div to be a responsive square?
The div within that is set to display: table, and then the one within that is set to display: table-cell; vertical-align: middle. These are enough for all browsers except Safari. Any ideas?
Thanks!
I've centered my text in my div but I've only managed to center it horizontally by using text-align: center
However I'm having trouble centering the text vertically. I've tried using vertical-align: middle; but it didn't work
Here is a codepen: http://codepen.io/anon/pen/Ioiaq
the code with the text is right at the bottom of the html panel the text is "INFO"
and here's the code so far:
<div id="inf" style="
text-align:center;
background-color: white;
position: absolute; top:50%; left: 45%; width: 10%; height: 6%;
z-index: 10;
display: inline-block;">
<span>INFO</span>
</div>
any ideas?
I don't mind what code is used to fix the alignment it doesn't have to be css.
To center a single line vertically, you can use CSS line-height whith the same value as the height value you are using.
line-height with a vertical-align: middle; is probably the best way to go if you aren't using JS.
FIDDLE
HTML:
<div id="inf">
<span>INFO</span>
</div>
CSS:
#inf {
text-align:center;
background-color: white;
z-index: 10;
display: inline-block;
width: 100%;
line-height: 400px;
vertical-align: middle;
}
You could use the CSS property vertical-align.
vertical-align: middle;
<body>
<div style="width:800px; height:500px; margin:0 auto; background-color: blue" >
<div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div>
</div>
</body>
This code is not working... how do I align the image vertically?
Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.
This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking you don't care.
Here is an example
Tested in:
FF3.5
FF4
Safari 5
Chrome 11 & 12
IE9
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
div.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
div.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
I mean by not using any other tags...just one tag and the CSS for it.
So
http://jsfiddle.net/EqTsu/
<style>
#test{
width: 100px;
height: 100px;
text-align: center;
border: solid 1px #ff0000;
}
</style>
<div id='test'>foo</div>
needs what to center vertically?
Per Answers Below
It needs
display: table-cell;
vertical-align: middle;
There's a sort of hack-ish work-around where you give the <div> the display: table-cell; property and then the vertical-align: middle; property, yes.
So the complete CSS would be:
#test{
display: table-cell;
vertical-align: middle;
width: 100px;
height: 100px;
text-align: center;
border: solid 1px #ff0000;
}
Also, external stylesheets are your friends.
Here's a jsFiddle using your code:
http://jsfiddle.net/EqTsu/2/
Adding display: table-cell; will cause the element to be treated like a cell in a table, which then enables you to use the table formatting CSS vertical-align: middle;.
Understanding vertical-align, or "How (Not) To Vertically Center Content"