I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Related
<div class="header">
<img src="logo.png" id="logo">
<div class="headerText">
<span>WYJĄTKOWA PIOSENKA NA URODZINY</span>
</div>
</div>
I have a problem. I would like to justify the <span> to right.
Here the problem with float:right is that it creates a new line if the preceding sibling is a block element or the element itself has no space to fit in, like the text. But text can break to a newline if necessary.
And here comes the use of display:flex;.
With flex, you are creating columns of its children, which is similar to float:left by using flex-direction:row on the parent element. And in case you need an element to float right, just give it a margin-left:auto;
.header {
display: flex;
flex-direction: row;
}
.headerText {
margin-left: auto;
}
img {
height: 50px;
width: 50px;
object-fit: cover;
}
<div class="header">
<img src="http://novaservis.info/wp-content/uploads/2017/12/small-cute-dog-breeds-that-stay-smallbest-25-types-of-small-dogs-ideas-on-pinterest-types-of-dogs-exciting.jpg" id="logo" />
<div class="headerText">
<span>WYJĄTKOWA PIOSENKA NA URODZINY</span>
</div>
</div>
Title above is align image into right, below description is align span to right assuming aligning span to right image to left answering this question. Here below i created a class named right whose css says float:right; and left whose css says float:left; , basically it aligns the position of an element. I am doing it for you to understand the css
.right
{
float:right;
}
.left
{
float:left;
}
<div class="header">
<img src="logo.png" class="left" id="logo">
<div class="headerText">
<span class="right">WYJĄTKOWA PIOSENKA NA URODZINY</span>
</div>
</div>
I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image
[IMG]
[IMG] Here is the text
[IMG]
I am getting the following, because the two cell divs are equal width, instead of matching content width:
[IMG]
[IMG] Here is the text
[IMG]
The code is preexisting. There is a table container div:
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
And two table cell divs:
.vertical-align-child {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?
HTML:
<div class="vertical-align-container">
<div class="vertical-align-child" style="padding-left: 0;">
<img src="path/img.png">
</div>
<div class="vertical-align-child">
<p>Here is the text</p>
</div>
</div>
As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?
I think you could approach this with flexbox.
You can use the align-items property for vertical centering.
.container,
.text {
display: flex;
}
.text {
align-items: center;
padding-left: 1rem;
}
.image img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
<div div class="text">
<p>
Here is the text
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
Found an ugly workaround for this here:
CSS table column autowidth
The issue I was having was that my image is set to 100% width, while using a max-width of the size I wanted it to stop at. Apparently the table isn't willing to read in the max-width as the content size, so it chose 50%.
I hacked in a width for the image and set the table cell to have nowrap, as in the linked question. It's not by any means a good answer, but it'll do for a quick fix.
I have this HTML code:
<div class="col-md-3 center-block">
<div class="icon-circle">
<i class="fa fa-desktop"></i>
</div>
</div>
And this CSS:
.icon-circle {
float: none;
display: table-cell;
vertical-align: middle;
text-align: center;
}
The fa-desktop is aligned vertically and horizontally centered in the icon-circle class. Now I want to align the whole icon-circle within the col-md-3. But since there is display table cell, the display block in the center-block doesn't work. Do you have any idea how could I get it work?
the icon-circle parent need to be in table display mode
.col-md-3 {
display: table;
}
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
I am trying to vertically align images in a twitter bootstrap used css.
I have a fluid row and 4 span classes span3 within that row. I have used table and table-cell trick but it does not work for me.
here is the sample code.
<div class="row-fluid">
<div class="span3">
<img src="http://bumblesea.com/blog/indie-fashion-design/lou-o-bedlam-flickr-fashion-photographer-300x300.jpg" alt="">
</div>
<div class="span3">
<img src="http://24.media.tumblr.com/tumblr_ku9h6qcBRn1qat5v7o1_500.jpg" alt="">
</div>
<div class="span3">
<img src="http://1.bp.blogspot.com/_KWR_gvxCigs/Ss0lQXRQj7I/AAAAAAAADkg/drrHCuZd8mA/s400/fashion1965-6.jpg" alt="">
</div>
<div class="span3">
<img src="http://www.urbalicious.com/wp-content/uploads/2009/09/givenchy_jakandjil.png" alt="">
</div>
</div>
and the CSS that i have modified is
.row-fluid {
display: table-cell;
}
.span3 {
text-align: center;
display: table-cell;
vertical-align: middle;
float: none;
}
However it works if I use a span12 class and put 4 div inside the span12 using display:table-cell but it breaks the responsive nature so cannot afford this.
I guess here Vertically centering two <div class="span6">'s within Bootstrap is the similar problem but suggestions does not work for me.
you need to use !important to overwrite bootstrap rules, or use heavier selector:
http://jsfiddle.net/HGy7a/
.row-fluid {
display: table!important;
float:none!important;
}
.span3 {
float: none!important;
display: table-cell!important;
vertical-align:middle;
}