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;
Related
I have two divs. First one has a image file and the other one has a username. I just want to align the second div vertically center just like this way.
But this one is not aligned perfectly. This screen already coded but the problem is that I still couldn't figure out the perfect way to align middle the user name div. I just use my naked eye and adjust padding.
Here is the my code
.tag-header {
padding: 12px;
overflow: auto;
}
.tag-header .tag-header-img {
height: 55px;
width: 55px;
border-radius: 50%;
float: left;
}
.tag-header .info {
padding: 14px 11px;
display: inline-block;
font-size: 1.3rem;
line-height: 14px;
}
.tag-header .info p {
margin: 0;
font-weight: 600;
line-height: 1;
font-size: 1.3rem;
}
.tag-header .time {
display: block;
font-size: 1.2rem;
}
.info span {
font-weight: 300;
color: #b9b9b9;
}
<div class="tag-header">
<div class="col-md-6">
<div class="row">
<img class="tag-header-img" src="http://blog.couchbase.com/binaries/content/gallery/speakers/kirkk.jpg" alt="">
<div class="info">
<p>John Stevens</p>
<span class="time">2 minutes ago</span>
</div>
</div>
</div>
fiddle
Any solution?
Heres your fiddle updated https://jsfiddle.net/p4x7d3fq/5/ -- i added borders just so you can see.
Using display:table-cell you can achieve this, if you don't mind the slight changes, including the addition of a height to match that of your image.
You seem to have done an ok job making them both have the same height, the image doesn't have to use float: left;, you can also use display: inline-block; on it and vertical-align: middle; on both the image and the name, this way you don't need them to have the same height.
Also, make sure you use Bootstrap properly, you first need a "container" div, in the container you put a row, and in that row you put columns.
You only put a div with a row class in a column div if you want more columns in that column.
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
Try to use flexbox:
.info {
display: flex;
}
I haven't used CSS quite often. I always get stuck even when it get's to the simplest layout questions. Even though I am reading a book I cannot figure out how the following works:
I want to design a website which has a header on top, then menu bar and then content. Menu bar and content are working quite good. But I want to have a header with some header text on the left and a logo on the right.
So I have taken this approach:
<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><img src="somelogo.png" /></div>
</div>
And for the CSS:
#headline { overflow: hidden;
height: 224px;
text-align: left;
padding: 0px 80px 0px 80px;
}
#headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20pt;
color: #000000;
float: left;
font-weight: bold;
}
#logo {
float: right;
}
So I made the text on the left float: left and the logo on the right float: right. So far so good. Now I want to align both elements to the vertical middle of the parent <div> that has a certain height.
This is what I want it to look like (the blue rectangle is the logo):
I have tried using vertical-align: middle but this does not work out. I have also stumbled across display:table-cell and display: inline but I must have used it in a wrong way or it also does not work. Do I have to use another "wrapper" <div> inside the headline element?
Edit: thanks for the hint about fiddle; I tried to edit one: http://jsfiddle.net/f5vpakdv/
Thank you for your help!
You can achieve this using display: table and display: table-cell, together with vertical-align: middle.
I've removed some irrelevant bits from your original CSS to make it easier to see what's different.
To make it work perfectly after you add padding or margin, check this link: Box Sizing | CSS-Tricks.
<div id="headline">
<div id="headertext">
Some title<br/>some more title text
</div>
<div id="logo">
<div id="fakeImg"></div>
</div>
</div>
...
#headline {
width: 100%;
height: 224px;
background: yellow;
display: table;
}
#headertext {
text-align: left;
}
#headertext,
#logo {
display: table-cell;
width: 50%;
vertical-align: middle;
}
#fakeImg {
width: 100px;
height: 100px;
background: blue;
float: right;
}
Demo
You can use some CSS to accomplish this. Also check for vendor-specific transforms.
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Here is a fiddle, and I added another div wrapper.
http://jsfiddle.net/5o3xmfxn/
Updated version of your fiddle:
http://jsfiddle.net/f5vpakdv/1/
I have updated your fiddle here. I simply added display:table; to your wrapping div and gave both inner divs a style of:
display:table-cell;
vertical-align:middle;
I also made a version using flexbox here
I just added the following styles to your wrapping div:
display:flex;
align-items:center;
justify-content:space-between;
I would go for something easier like this. Just put wrapper around the content that you want to center and use a margin-top: http://jsfiddle.net/f5vpakdv/2/
<div id="headline">
<div id="wrapper">
<div id="headertext">Some title some
<br/>more title text</div>
<div id="logo"><img src="somelogo.png" width="198px" height="120px" />
</div>
</div>
</div>
CSS
#wrapper {
margin-top: 60px;
}
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)
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.
I have an element that's 60px tall that has other elements like an image and a couple of spans inside of it and I'm having trouble getting them to align vertically inside the 60px high element. Here's the mockup and CSS:
<div class="member">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
#sidebar .member {
height: 60px;
margin-bottom: 10px;
vertical-align: center;
}
#sidebar .member .name {
font-size: 15px;
font-weight: bold;
}
#sidebar .member .pic {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
#sidebar .member .skills {
display: block;
font-size: 12px;
overflow: hidden;
}
I've put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/
As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:
Already tried vertical-align: middle; but with no luck.
You can use vertical-align: middle in td table layout only. So you have to add a div around the spans
<div class="cell">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
with this properties
#sidebar .member .cell {
display: table-cell;
vertical-align: middle;
height: 50px;
}
You can test it here: http://jsfiddle.net/Tn2RU/
Try putting them all in a div that you can vertically align using
position:relative;
margin-top: auto;
margin-bottom: auto;
height: XXpx;
You need to set the width of a parent element and width of your children so they must go into next line.
The other posibility would be to set your parent element to position:relative and then use position:absolute on all children and simply, precisely position them with top:20px; , then next one top:40px; etc etc.
With this second solution you can get exact pixel positioning of all children elements.
That shall positively give you best results.
You could also put them into a div and add padding to the top.
HTML
<div id="block">
<span class="name">John Smith</span>
<span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>
CSS
#block {
padding-top:5px;
}
jsFiddle