using this css I am able to center the image, however, the image now floats on top of the text. Originally I had the top at 0 all around, but these dimensions get the image correctly centered. What can I do to keep the next line of text below the image and not under?
img.center {
position: absolute;
top: 40px; bottom:50px; left: 105px; right:105px;
margin: auto;
}
Absolute positioning takes the image "out of the flow". To keep it in the document flow you could use something like:
If you know the height of the parent:
.parent {
line-height: 100px;
}
.parent img {
vertical-align: middle;
}
If you don't know the height:
.parent {
display: table;
}
.parent img {
display: table-cell;
vertical-align: middle;
}
Related
I need to set image in the middle of the element.
Example of my CSS:
.main {
width: 600px;
position: fixed;
left: 50%;
margin: 100px -300px;
background-color: green;
}
.main .image-holder {
width: 100%;
display: block;
}
.main .image-holder img {
margin: 10px auto;
}
.main has fixed width, but also that size is dynamically changable in the jQuery.
.image-hodler should be something like a thumbnail. I set width to the 100% because, I never know, what size will main element have.
img and here that margin setted as auto doesn't work.
JSFIDDLE
Just add 'text-align: center' on the parent div, like so : http://jsfiddle.net/bj6meje0/1/
.main .image-holder {
width: 100%;
display: block;
text-align: center
}
Or you can change the image behavior to display as block, in html the image is like an 'character' so you can do:
.main .image-holder img {
display: block;
margin: 10px auto;
}
Fiddle : http://jsfiddle.net/bj6meje0/2/
The difference? With the second aproch you will be able to change the "text-align" property of the div, otherwise the text will appear centered as the picture
I'm trying to make a header for my web page with one element in the middle of the header, and one right-justified in the header.
The only ways I could think of doing it was:
Using float - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
float: right;
}
Using absolute positioning - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10px;
}
The problem is that with both of these methods, the social links/images no longer are vertically aligned to the header, but rather are hugging the top of the page despite me setting them to inline-block with a height of 100%, and vertical-align: middle. (source of my reasoning for trying this vertical align method)
With the float method, there appears to be the additional problem of the centered element not actually being horizontally centered within the header, but rather placed next to the social links and centered within its own div which is not what I'm looking for.
Any pointers on how I could achieve the desired result of having a horizontally centered element with right-justified elements all inline and vertically centered would be much appreciated!
one solution is to add relative to the Header Wrapper and positioning the social links properly using the absolute top value.
Updated JSfiddle
#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}
How do you center an image with text inside a block?
I know you can center a block inside another block by giving the latter a fixed width and margin: auto. However, I don't know the dimensions of text beforehand (actual text content may vary).
The CSS I have got so far:
.outer {
width: 400px;
}
.outer table {
border: 0;
width: 100%;
}
.outer table td {
vertical-align: middle;
text-align: center;
}
.outer table td p {
text-align: left;
}
Please take a look at this DEMO
Here is my css:
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
.left {
float: left;
}
Explanation about :before element:
This is an invisible element pseudo element, which is used for better vertical centering: it emulates a 0-sized inline-block element, which, in conjunction with normal inline-block element (.centered) allows us to use vertical-align.
UPDATE:
You can set height to .block to see how it will be centered vertically:
http://jsfiddle.net/jb5EJ/5/
UPDATE 2: Is this closer: http://jsfiddle.net/jb5EJ/13/
Checkout this link. I hope you will get the solution.
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
TLDR: with only this CSS you can position an element in absolute center (both horizontally and vertically):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Add vertical-align:middle; to img too....also, i would suggest to add height to outer class
<img src="some_src" style="vertical-align:middle;" /> I have some text too
demo to get u started
In each row I have three boxes (blue) of fixed dimensions (width: 299px, height: 307px)
In every box there is an image (pink) of unknown dimensions. I know only max-width: 262px and max-height: 200px. Under the image there is some short two-three line text. I need to center images in the space above the text both horizontally and vertically.
I set the boxes to float:left and I set images position:absolute. I don't know how to make it work now :(
The easiest way is to use table display, but that requires a lot of container elements in your markup. If the text height is fixed too, I would go with the "100% height ghost" technique described here.
Applied in your case:
.box{
text-align: center;
position: relative;
/* removes spaces between inline-block elements */
/* another way is to add some negative margin on them */
font-size: 0;
/* account for text height */
padding-bottom: 70px;
/* +box width, height, float props etc. */
}
.box p{
position: absolute;
bottom: 10px;
left: 5%;
width: 90%;
font-size: 14px;
}
/* the ghost, which forces vertical-align */
.box::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.box img {
display: inline-block;
vertical-align: middle;
/* here you have to resize your images to fit within the box */
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Markup:
<div class="box">
<img ... />
<p> text... </p>
</div>
test: http://cssdesk.com/MmrVV
.image-class {
display: inline-block;
}
.image-container-div {
text-align: center;
}
It's ok to float the container.. but may not be ok to float the image class.
You could also have the image and text in separate container divs, so to avoid the text shifting positions.
I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
<div class="wrapper">
<div class="dontBreakmyLine">
Some generated text
</div>
<div class="iCanUseWhatIsLeft">
Another generated text
</div>
</div>
Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?
There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces
Here is a fiddle
http://jsfiddle.net/hqWaU/
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
width: 1px;
white-space:nowrap;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
div {
border: 1px solid silver;
}
A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with right: 0px; (DEMO).
.wrapper {
width: 100%;
}
.dontBreakmyLine {
max-width: 300px;
float: left;
position: relative;
z-index: 2;
}
.iCanUseWhatIsLeft {
position: relative;
right: 0px;
z-index: 1;
}
The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.
If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).