I am trying to do a vertical align for my texts and images.
It seems the texts are aligned to top in my jsfiddle
text here --
| |
--
I want to have my text to be like
--
text here | |
--
http://jsfiddle.net/wjPxS/
I can't really change my image float right in css. Can anyone help me about it? Thanks so much!
Seeing as you know the height of your container you can just set the line-height the same as height to vertically align the text.
Demo
.div1 {
height: 20px;
line-height:20px;
}
updated jsFiddle
You need to apply
display: inline-block;
vertical-align: middle;
to both img and span. In jsfiddle I replaced span with `div'.
Though, this doesn't let you float the img to the right.
Related
I've got a grid built using images and text beneath the image. And some of the images are of different height and I'm getting a "staircase effect" that looks like this.
What I'd prefer, is a version where all the text below the image is aligned and the images are
bottomed aligned.
I thought giving the img's container relativepositioning and then setting the imgto position: absolute; with a bottom: 0 would solve this but no dice.
If I give the img's container a height in pixels it solves this, but when I start resizing the browser the img containers' height stays at a fixed height and doesn't look good on small screens.
Any idea on how to set the img container height automatically (for responsiveness) and for it to keep the images and text aligned?
I've setup a Codepen with my struggles here: http://codepen.io/realph/pen/zFEdv
Any help is appreciated. Thanks in advance!
Add the below css:
.row > ul > li{
display: table-cell;
vertical-align: top;
}
and remove img styling where you are positioning the image.
Working Fiddle
I have a layout, where I have to make a vertical centeret, with a rotated text inside.
See fiddle: http://jsfiddle.net/C7mCc/3/
I use display:table; and display:table-cell; to make the vertical centering, which is working good.
The HTML
<div id="top-banner-advertising-text" class="v-center">
<p class="v-c-content">Annonce</p>
</div>
and the CSS
.v-center {
display: table;
}
.v-center .v-c-content {
display: table-cell;
vertical-align: middle;
}
But I only want the #top-banner-advertising-text to have a width of 15px. Like in this fiddle: http://jsfiddle.net/C7mCc/4/ where I have removed the .v-center and .v-c-content and therefore do not have the text vertical centered.
How can I control the width of the div?
This ended up being a lot more complicated than I expected. To control the width you must take into consideration your parent divs. There is an excellent explanation of this here:
100% height block with vertical text
Although this in order to help you out I went ahead and figured out how to switch this code up to swap the text to the other side of the img for you.
my jsfiddle:
http://jsfiddle.net/C7mCc/6/
To answer your questions, "How do I control the width".
This is done by taking the following lines in the css and making sure they match,
padding-left:2em; /* line-height of .wrapper div:first-child span */
width:2em; /* line-height of .wrapper div:first-child span */
height:2em; /* line-height of .wrapper div:first-child span */
line-height:2em; /* Copy to other locations */
Remember since your vertical now you must think about the padding left.
basically your line height padding left width and height come in to play.
We control them with em in order to make sure they are sized correctly.
Let me know if you need anymore help.
Sounds like you're looking for the not selector:
/* if it must not have the vertical centering class */
#top-banner-advertising-text:not(.v-center) {
width: 15px;
}
http://jsfiddle.net/C7mCc/5/
Alternately, you could leave the width as you have it in your 2nd example and add this:
#top-banner-advertising-text.v-center {
width: auto;
}
to set a width for an element displayed as table, you use : table-layout:fixed;
But you do not say that you want as well to rotate a text.
To rotate that text, you will need white-space:nowrap if more than one word (15px is really small).
to replace that text in middle, you will need translate(); and set that text in a container displayed as a table, so it expands over 15px and makes translate usable.
here an example with 2 version rotated 90 and -90 degres : http://codepen.io/gc-nomade/pen/JuAio.
For older IE, search for the old writing-mode http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx ;) .
i got a question about how to center a text inside a div in html / css.
I have a h3 tag like this
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
and the css
h3 {
width: 100%;
height: 28px;
display: block;
}
If I have a name longer than 1 line, then the 2 lines of the text fit in the div, but if there is only 1 line, I want it to be vertically centered not aligned on top.
EDIT: i have this layout and i want in the both divs the text to be centered vertically
http://jsfiddle.net/shRRz/3/
I have found the way to do it. It seems i need to use this css to make it align like i wanted.
display: table-cell;
vertical-align: middle;
Thank you very much for the tips, people.
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.
I have a button and with some text next to it, like this,
----------------
| |
| Button | Text
| |
----------------
I would like to have the text vertically aligned to the center of the button. How should I do this in CSS?
Here is my attempt:
http://jsbin.com/oduma4/4
I have found two problems with this approach:
The text is displayed on top in IE 6.
The two elements flow out of parent div so this layout will interfere with other divs.
To center text vertically set the line-height to the same as the height, for example:
#form-actions{ height: 30px; }
#text{ line-height: 30px; }
And set vertical-align to middle:
#text{ line-height: 30px; vertical-align:middle; }
So long as the element you are trying to vertically align and all of its siblings are inline or inline-block, just use vertical-align: middle.
Preview: http://jsfiddle.net/Wexcode/KceFF/