why isn't the img centering? - css

Update: Yes, putting text-align: center in the containing div did the trick!
I'm at a loss as to why the img is not centering.
Here's the CSS:
#add_next {
clear: both;
width: 79%;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
.next_button {
height: 60px;
margin-top: 13px;
margin-left: auto;
margin-right: auto;
text-align: center;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
And here's the html snippet:
<div id="add_next"><a href=# ><img src="images/next button5.png" class="next_button" /></a></div>

If you add text-align:center; to the parent div element, it will center.
fiddle

You can add display:block to the image or text-align:center to the containing div.
At the moment it's the image is an inline element so it will align to your default text align (usually left)

Inline elements (a, img) can't be centered using auto margins, and you can't apply text-align: center; to the element you want to center.
try adding text-align: center; to #add_next.

Related

Align rotated Text to center

Is it possible to align a rotated text to center?
For example here:
ill try using:
.accordion div.image .title {
bottom: -15px;
color: #fff;
display: block;
font-size: 16px;
max-height: 200px;
position: absolute;
transform: rotate(270deg);
transform-origin: 0 0 0;
white-space: normal;
left: 20px; // this is only the way to center it from left corner }
But when the text has a line break, i have no chance to align it to the center.
Any ideas?
Here is one approach (proof of concept) that involves using the translate function of the transform property and display: table-cell.
First, use display: inline-block on the parent container to get a shrink-to-fit to the image size (or else specify fixed dimensions if you can).
You then define an absolutely positioned container to contain the label. I fixed the width and height (this makes things easier) and then rotated and translated the box to center it within the parent.
Finally, I used vertical-align: middle in the nested table-cell container to allow multiple lines of text to remain centered.
If you are adding this to a pre-existing HTML/CSS structure (accordion?), you need to make the CSS very specific so that you don't break other CSS styling.
You may still need to make some adjustments depending on how you want the bottom of the label to be positioned and so on.
.image {
position: relative;
border: 1px dashed blue;
display: inline-block;
}
.image img {
display: block;
}
div.cell {
display: table-cell;
text-align: left;
vertical-align: middle;
}
div.image .title {
font-size: 16px;
white-space: normal;
color: #fff;
display: table;
border: 1px dotted blue;
position: absolute;
bottom: 0%;
left: 0%;
transform: rotate(270deg) translate(50%,50%);
transform-origin: 50% 50% 0;
width: 300px;
height: 100px;
margin-left: -50px;
}
<div class="image">
<img src="http://www.placehold.it/300x400">
<div class="title"><div class="cell">The title text
that can span two lines or more in a box<div></div>
</div>

Positioning text with the :after pseudo selector

I have this:
div#myImg{
background: url('myimage.png') left top no-repeat;
}
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
}
<div id="myImg" class="lp_imgs"></div>
I know you can add text with the :after pseudo selector, but I want to position that text, centered, just below my image.
Can I do that with the :after pseudo selector?
At the moment, the text seems stuck to the top of the div#myImg DIV.
UPDATE:
display:block
Doesn't do the trick...
Usually I use CSS position to do that sort of thing. Make the parent position:relative, add position:absolute to the ::after element, and give it a top:100%
http://jsfiddle.net/s22Af/
div#myImg:after{
content: 'TEXT UNDER IMAGE';
margin:0 auto;
vertical-align:text-bottom;
font-size: 14px;
position:absolute;
top: 100%;
text-align: center;
}
.dm_lp_imgs{
width: 100px;
float:left;
height: 115px;
margin-right: 15px;
position: relative;
}
You can position pseudo elements absolutely relative to the parent. Add position: relative to the div and position: absolute to the :after CSS, then position using usual methods. I've done a quick fiddle of it here: http://jsfiddle.net/5s3Fr/
I don't know your requirements but if you're coding for modern browsers/html5 you should look into the <figure> and <figcaption> html tags
For your consideration: FIDDLE
Markup:
<figure id="myFigure">
<div id="myImg" class="dm_lp_imgs"></div>
<figcaption>text under image</figcaption>
</figure>
CSS
.dm_lp_imgs {
width: 100px;
height: 115px;
}
#myFigure {
float:left;
margin-right: 15px;
width: 100px;
}
#myImg { background: url('myimage.png') left top no-repeat; }
#myImg + figcaption {
/* Style caption here */
text-align:center;
text-transform:capitalize;
}

Center DIV horizontally with margin

For some reason, I cannot center the .logo class with CSS.
I've tried margin:0px auto.
Am I overlooking something?
Thanks.
CSS:
.full {
width: 100%;
height: auto;
float: left;
clear: none;
position: relative;
display: block;
}
.logo {
width: 230px;
height: 117px;
float: left;
clear: none;
position: relative;
display: block;
margin: 10px auto 15px auto;
padding: 0;
}
HTML:
<div class="full">
<figure class="logo"></figure>
<figure class="x-button"></figure>
</div>
Remove the following:
.logo {
float: left;
}
You cannot directly center a floated element via margin:0px auto;. If you want an element to be floated and center, you can always apply the margin to the parent while the child itself keeps the float. An example of this can be seen here.
Keep in mind, if it is just text you are trying to center, you can always just use: text-align:center;
Remove float: left; for .logo. float: left makes it align to the left.
Click here for a demo fiddle.
At least in this case, you can not center a floated element horizontally.
Here is a minimal example: http://jsfiddle.net/tJ5N3/
You can remove the floating, as others said above.
Also, as a workaround, you can wrap your element with a div that is horizontally centered. In this case, your can keep your floating, if it is necessary.

I can not center the div content

This is my fiddle: http://jsfiddle.net/7UwD2/
I've tried everything I found on the internet - setting:
margin: 0px auto; with width, but it doesn't work.
Only if I'll add an attribute: text-align: center; to the head-title class it does center - but only the text, image is still on the left position.
Where is my problem?
Remove the float from the image,
use text-align: center on the outer DIV,
use a SPAN instead of the inner DIV,
apply vertical-align: middle to the image and SPAN
HTML:
<div class="head-title">
<img class="list-icon" src="...">
<span>Menu</span>
</div>
CSS:
.head-title {
width: 150px;
height: 26px;
padding: 5px;
text-align: center;
}
.head-title > * {
vertical-align: middle;
}
.list-icon {
width: 24px;
height: 24px;
}
Live demo: http://jsfiddle.net/7UwD2/6/

css trick for centering horizontal and vertical

My .cent class is for <li> elements. I want to center the text of the <li> both horizontally and vertically. text-align:center; takes care of horizontal centering, but the vertical centering isn't working. What's the CSS trick for this?
.cent{
height:20px;
width:20px;
text-align:center;
vertical-align: middle;
}
Use line-height property.
Set it equal to height of element, and text will be vertically centered.
.cent{
height: 20px;
width: 20px;
text-align: center;
/*vertical-align: middle;*/
line-height: 20px;
}
What is its parent?
.parent {
position: relative;
}
.cent {
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}
Or if you want vertical-align: middle to work, set display: table-cell.
Try to set the style for li tag, margin and padding tags are will help you
Like,
# set default
li
{
margin: 0;
padding: 0;
}
after write the style for your class cent, it will be affect the li tag properly.

Resources