I have a question regarding the vertical align issue
I asked a question yesterday
How to vertical align my images and texts
but I have changed the codes and texts. The texts inside span has 2 lines of texts and I am not sure how to vertical align middle for image and texts.
I have set vertical-align to middle on most of the element but still not working
My jsfiddle
http://jsfiddle.net/wjPxS/4/
Can anyone help me about it? Thanks!
Here is one way of doing it.
For this HTML:
<div class='div1'>
<span class='title'> this is the text<br>this is the second text</span>
<a class='link' href='#'>
<img class='img' src='http://placehold.it/100x50'/>
</a>
</div>
try the following CSS:
.div1 {
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
font-size: .8em;
height: auto;
}
.title {
width: 200px;
height: auto;
vertical-align: middle;
display: inline-block;
border: 1px solid blue;
}
.img {
vertical-align: middle;
}
If you use display: inline-block for .title, you will get better results, otherwise, the alignment will take place with respect to the second line of the .title block.
See demo at: http://jsfiddle.net/audetwebdesign/mqwzU/
I wrote a Fiddle to demonstrate how to vertically align everything withing anything.
it also works with 2 line of text, and pretty much everything you want.
HTML:
<div class="Container">
<div class="Content">
I'm the Content
</div>
</div>
CSS:
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
Your Fiddle
Here is an updated Fiddle just for your case. (#Marc Audet: I used your image)
Related
I've searched this question and have found some answers but they just miss my scenario.
The situation is elements are dynamically created and placed into rows. In each row, the number of elements is variable, so I don't know how much horizontal space they take in advance. One of them I want to have take up the remainder and have it grow vertically as needed but for its left position to remain unchanged, which should always be positioned to the right of the other elements in its row. Here's a mockup of what it should look like for three rows where the second row needs to grow:
Instead, here is what I am getting:
Here's a simplified version of html that illustrates the issue:
.container {
display: block;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
display: inline-block;
width: 100px;
vertical-align: top;
background-color: red;
}
.fixedPart2 {
display: inline-block;
width: 200px;
vertical-align: top;
background-color: red;
}
.varPart {
display: inline-block;
max-width: 500px;
min-width: 50px;
background-color: yellow;
}
<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>
Because my example here is a simplification, I am hoping that any solution offered is as close as possible to what I've posted here. Any guidance would be appreciated.
Simply use flexbox like below:
.container {
display: flex;
align-items:flex-start;
max-width: 600px;
border: 1px solid black;
}
.fixedPart1 {
width: 100px;
background-color: red;
}
.fixedPart2 {
width: 200px;
background-color: red;
}
.varPart {
flex-grow:1;
min-width: 50px;
background-color: yellow;
}
<div class="container">
<span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
<span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
<span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>
I have a bunch of images in a row that I want to align with bootstrap glyphicons in the same row. So far, the glyphicons are much higher than the images, and I can't figure out why. The only margin I changed was left-right. The elements are nested inside a row. I am using reset.css, animate.css and bootstrap.
I can't figure out, how to make the glyphicons align with the images. Edit: they are nested inside divs to add angular classes and functions. Any help appreciated.
html:
<div class="row carousel-thumbnails">
<div class="col-xs-12">
<div><span class="glyphicon glyphicon-chevron-left"></span></div>
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<div><span class="glyphicon glyphicon-chevron-right"></span></div>
</div>
</div>
css:
.webpage {
margin-top: 2em;
}
.link-list {
text-align: center;
}
.link-icon {
display: inline-block;
}
.link-image {
height: 3em;
width: 3em;
border-radius: 120px;
margin: 0 1em;
}
.thumbnail {
text-align: center;
}
.carousel-thumbnails {
text-align: center;
}
.carousel-thumbnails img {
width: 6em;
height: 6em;
margin: 0 0.5em;
}
.carousel-thumbnails div {
display: inline-block;
}
.carousel-thumbnails div span{
font-size: 5em;
}
.active {
border: 0.1em solid red;
}
Codepen link if you wanna fiddle :). Thanks for the help.
Its really simple
.carousel-thumbnails div span{
vertical-align: middle;
}
Add this in your style.
EDIT: As #Druzion said, the icons are vertical-aligned to the top of containing div by defualt. we need to give vertical-align: middle inorder to place them vertically center.
You can give
.glyphicon{ vertical-align: middle}
Both do the same trick
Here is the updated CODEPEN
All the images are vertical-align: middle, however the icons do not have this rule, so they are vertical-align to the top of the containing div.
Add vertical-align: middle to your divs containing the icons to line them all up
CODEPEN
add this to your images carousel class: margin-bottom: 4em;
I've been trying to center some text vertically within a div and after a while browsing StackOverflow I finally came up with this:
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
<div class="col-md-8">
<div class="frame">
<span class="helper"></span>
<div class="centerText">
<p>This is a short paragraph.</p>
<br />
<p>More stuff.</p>
<br />
<br />
<p>etc.</p>
</div>
</div>
</div>
This works fine when I have a short paragraph, as above. But I tried changing the paragraph and found that when I make it long enough that it would have to go onto another line, the whole paragraph got moved to below the "frame" div.
See here: fiddle
If I take away the span the long paragraph will go to the next line within the frame just fine, but it's no longer vertically centered.
What is going on here? How can I have a long paragraph that doesn't make all of the text get pushed out of the div?
Get rid of the height: 100% within your .helper.
Does that solve your problem?
If not, please let me know so I can help you with this.
Cheers,
Try this here:
- I also added some padding to the <p> element so it doesn't hug the edges of the div.
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
p {
padding: 5px;
}
<div class="col-md-8">
<div class="frame" id="frame2">
<span class="helper"></span>
<div class="centerText">
<p>This is a long paragraph. Like realy long. Too long to fit on one line in the frame. Goes to the next line. Which should be ok but for some reason isn't.
<br />
More stuff.
<br />
<br />
etc.</p>
</div>
</div>
</div>
I hope this helps
Your problem is that the helper, the centerText block and the space between them amounts to more than 100% width, so the centerText block overflows out of the frame.
To fix, adjust the horizontal margin of the helper to compensate for the space. There's no magic value for this - it depends on the container's font - but in your jsfiddle example, a value of -4px works. ( .helper { margin-left:-4px; } )
See http://jsfiddle.net/tngqjswm/18/
Aside 1: There are other ways of removing/hiding the space between inline-level elements
Aside 2: The helper span is a good candidate for being replaced by a pseudo-element in CSS. See http://jsfiddle.net/tngqjswm/19/
Set the parent .frame to display: table and the two children to display: table-cell
.frame {
height: 500px;
border: 2px solid black;
display: table;
}
.helper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.centerText {
display: table-cell;
vertical-align: middle;
}
FIDDLE
I have a small 2x2 HTML table. Each cell contains one image and one piece of text.
Example image:
As you can see, the text is vertically below the vertically middle level of the image. How can I make the text vertically in the center, relative to the image on the left?
I have tried a several different display values, which I can't fix this.
JSFiddle: http://jsfiddle.net/ahmadka/rbJNQ/
this all div behave like a
table: it is a rectangular block that participates in a block formatting context
.main-container is TABLE
.container is ROWS
.inner-container is CELLS
now all div behave like a table I just vertical align middle image so all content align in middle
.main-container{
display:table;
background:#bcbbbb;
width:100%;
height:100vh;
}
.container{
display:table-row;
}
.inner-container {
vertical-align: middle;
display: table-cell;
text-align: center;
}
.inner-container figure{
background-color:#807c7c;
vertical-align: middle;
display: inline-block;
margin: 0;
}
.inner-container p {
display: inline-block;
}
<div class="main-container">
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
</div>
Well. Try this:
<td>
<a id="social_twitter" onclick="window.open(this.href,'external'); return false;" href="http://twitter.com/JenierTeas">
<span>icon</span>
</a>
<span style="vertical-align: middle;">Twitter</span>
</td>
Your code looks way to complicated for this. It is also not really tabular data, so you should not use a <table>-element.
You can solve it as easy as this. I included only the important CSS rules in this answer.
HTML
<div class="social_body">
<a class="facebook">Facebook</a>
<a class="twitter">Twitter</a>
<a class="google">Google+</a>
<a class="share">Share This</a>
</div>
CSS
.social_body {
width: 280px;
overflow: hidden;
margin: 0 auto;
border: 1px dashed black;
}
.social_body a {
float: left;
width: 50%;
font-size: 16px;
line-height: 24px;
}
.social_body a:before {
content: '';
float: left;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
background: transparent 0 0 no-repeat;
}
.social_body a.facebook:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
.social_body a.twitter:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
/* […] You see where this is going. */
Demo
Try before buy
Use This Css
//CSS
#nst_block #social_body table {
background: none repeat scroll 0 center transparent;
border: 1px dashed black;
height: 75px;
margin: 0 auto;
width: 280px;
}
#nst_block #social_body table a {
border: 0 none;
font-family: inherit;
font-size: 16px;
font-style: inherit;
font-weight: inherit;
line-height: 24px;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Updated Link :http://jsfiddle.net/rbJNQ/16/
I realize that this question is 4 years old, but hey, why not answer it - maybe it helps someone else, since the OP probably solved it one way or another in the meantime.
In 2017 your problem, Ahmad, is solved fairly easy with the help of a flexbox (just Google it, you'll surely like it - if you haven't heard of it already, that is) set for the direct 'children' of the table's td-s. What you have to do is add the following to the CSS in your fiddle:
#nst_block #social_body table td > *
{
display: flex;
justify-content: flex-start;
align-items: center;
}
The main axis positioning is done by justify-content and the cross axis positioning (the vertical one, in your case) is done by align-items.
That's all.
You can design it using tables. Keep icon in one cell and text in other cell. Make them vertical-align as middle. So how what ever height the icon may be, text will be aligned vertically middle. Or If you are targeting only new browsers, then you can design this using flex box model.
The css property vertical-align: middle does not work in this example.
HTML:
<div>
<span class='twoline'>Two line text</span>
<span class='float'> Float right </span>
</div>
CSS:
.float {
float: right;
}
.twoline {
width: 50px;
display: inline-block;
}
div {
border: solid 1px blue;
vertical-align: middle;
}
The span that is floating on the right is not vertically centered with respect to its containing div. How can I have it vertically centered?
The above code is in this fiddle.
You must wrap your element in a table-cell, within a table using display.
Like this:
<div>
<span class='twoline'>Two line text</span>
<span class='float'>Float right</span>
</div>
and
.float {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.twoline {
width: 50px;
display: table-cell;
}
div {
display: table;
border: solid 1px blue;
width: 500px;
height: 100px;
}
Shown here: http://jsfiddle.net/e8ESb/7/
Vertical align doesn't quite work the way you want it to. See: http://phrogz.net/css/vertical-align/index.html
This isn't pretty, but it WILL do what you want: Vertical align behaves as expected only when used in a table cell.
http://jsfiddle.net/e8ESb/6/
There are other alternatives: You can declare things as tables or table cells within CSS to make them behave as desired, for example. Margins and positioning can sometimes be played with to get the same effect. None of the solutions are terrible pretty, though.
You should set a fixed value to your span's line-height property:
.float, .twoline {
line-height: 100px;
}
The answer given by Matt K works perfectly fine.
However it is important to note one thing -
If the div you are applying it to has absolute positioning, it wont work. For it to work, do this -
<div style="position:absolute; hei...">
<div style="position:relative; display: table-cell; vertical-align:middle; hei...">
<!-- here position MUST be relative, this div acts as a wrapper-->
...
</div>
</div>