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
Related
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;
}
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
I'm currently in planning stage for a site, which needs to scroll horizontally.
The simplest solution I have to tackle this is to go in this direction, JSFiddle.
I'm not sure if this is the best option, as I will have to arrange each div individually i.e. left: 100% left: 200%;.
Is there a way around the divs, with a display: inline-block value auto wrapping to the viewport, so I don't have to arrange each div individually?
Removing the absolute positioning
What you need to do here is remove the float and absolute positioning from your dividers and simply add white-space: nowrap to your body. As your dividers are set to display as inline-block, these get affected by the white-space property.
body {
margin: 0; padding: 0;
white-space: nowrap;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
}
JSFiddle demo.
Removing the spaces between each block
Now that we've removed the floats and the positioning, you'll notice that there is a white space between each divider. If we refer to this CSS Tricks article, we can remove this by simply giving the body a font-size of 0, and giving each divider a font-size of what you're wanting the font size to be within those blocks:
body {
margin: 0; padding: 0;
white-space: nowrap;
font-size:0;
}
.full {
width: 100%;
height: 100%;
display: inline-block;
font-size:16px;
}
Second JSFiddle demo.
http://jsfiddle.net/MsRCS/3/
You can remove the absolute positioning and use float instead.
body {
margin: 0; padding: 0;
width:300%;
}
.full {
width: 33.3%;
height: 100%;
display: inline-block;
float: left;
}
#screen-1 {
background: red;
}
#screen-2 {
background: blue;
}
#screen-3 {
background: yellow;
}
This block of css controls the position of some 3rd party images. They are generated on the fly as a javascript slider. I need to center it based on another image else where on the page. I know the left and right dimensions of my reference image. All I need to do is figure out how to center this block on that. Is there a way to center this between say 200px and 800px?
.pagination {
display: block;
margin:26px auto 0;
width:400px;
margin-left: auto;
margin-right: auto;
left: 130px;
position:relative;
text-align: center;
}
If you know the width is 400px (as per your snippet), you could do:
.pagination {
display: block;
margin: 26px auto 0;
width: 400px;
}
Example at http://jsfiddle.net/Ne9jz/
I have a HTML code as;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
My CSS is as follows;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)
I tried the standard way of using margin:auto, but that is not working.
Also I want to avoid using text-align:center.
Is there some other way of fixing this?
You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.
You could give the span a set width, then add the margin:0 auto again. This would center-align it.
.left
{
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt
{
display:block;
width:100px;
height: 100%;
margin: 0 auto;
}
If you know the width of the span you could just stuff in a left margin.
Try this:
.center { text-align: center}
div.center span { display: table; }
Add the "center: class to your .
If you want some spans centered, but not others, replace the "div.center span" in your style sheet to a class (e.g "center-span") and add that class to the span.