This question already has answers here:
How to use vertical align in bootstrap
(8 answers)
Closed 8 years ago.
I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important rule to display: table of your .v-center class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block.
Example
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Why does adding text do a div change the margin [duplicate]
(2 answers)
Closed 5 years ago.
I want to have 2 divs inside another one but the with different margin-top, every time I try to set the margin-top of the first one the second one aligns according to the first one. Let's say that first and second are two divs inside another div. I would like something like this:
second
first
But I'm getting this:
this second
You can have a clearer idea maybe visiting this fiddle
Flexbox to the rescue!
#wrapper {
display: flex;
}
.divF {
margin-top:20px;
}
/*Border added for demo so you can see what's happening*/
#wrapper { border: 1px solid #777; }
.divF, .divS { border: 1px solid #CCC; }
<div id="wrapper">
<div class="divF">
<p>first</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
Try vertical-align: top; Check the code below.
.divF{
display:inline-block;
margin-top:20px;
vertical-align: top
}
.divS{
display:inline-block;
vertical-align: top
}
<div>
<div class="divF">
<p>
first
</p>
</div>
<div class="divS">
<a href=#>second</a>
</div>
</div>
I'd like to center a div horizontally on the page (the div contains four gauge like radial dials that need to be next to each other and not one line after the other). My current CSS (below) displays the gauges next to each other so the float property seems to work fine but the margin property I have set for the parent div (allgauges) doesn't seem to be effective. Does the fact that I have several divs inside of "allgauges" make a difference when I try to align it to the center of the page? Any help is appreciated.
<!-- Embedded style sheet to change the margin spacing between the gauges -->
<style>
#one, #two, #three, #four
{
float: left;
}
#allgauges
{
margin: 0 auto;
}
</style>
This question has been answered multiple times. Here is the solution:
.one,.two, .three,.four
{
display:inline-block;
vertical-align:middle;
width:25%;
text-align:center; /* This is not necessary.*/
font-size:13px;
}
.allgauges
{
font-size:0;
}
<div class="allgauges">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div>
I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside.
Here is a photo of what it looks like now.
Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.
Here is my html:
<div class="row" style="padding:30px 10px 30px 20px; margin:auto; display:block;">
<div class="large-12 column large-columnz">
<img src="">
<div class="row column">The Title
Article Excerpt</div>
</div>
</div>
</div>
Here is the css:
.large-columnz {
max-width:560px;
margin-bottom:10px;
display: inline-block;
vertical-align: top;
*display: inline;
}
I am using the Foundation responsive framework to design my site as well as my own incorporated css.
Can anyone tell me what I am doing wrong which causes the last two post to not align.
in the parent div that wraps all the divs ( if you don't have a wrapping div then add 1 ) and then add display: flex; in the parent div style and all the child containers will have the same height..
I have a webproject using bootstrap.
There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image.
The first problem was to get the columns the same height.
I found the following working solution:
.col {
margin-bottom: -99999px;
padding-bottom: 99999px;
height:100%;
}
To get the text centered vertically I inserted the following html in the right row:
<div class="table">
<div class="cell">My text</div>
</div>
CSS:
.table {
height:100%;
width:100%;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
height:100%;
}
But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;
Anybody has an idea what I can do? Thanks
I think that if you can do it, try to use flex-box instead of a fixed grid.
Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG
HTML:
<div class="row">
<div class="column">
<p> Here you have some content.</p>
</div>
<div class="column">
<p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
</div>
</div>
And CSS:
.row{
display:flex;
}
.column{
display:flex;
width:50%;
align-items:center;
}
(And to learn how to properly use the flex property: http://flexboxfroggy.com/)
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:
float: left;
clear: none;
As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.
How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?
If I understand your question correctly, something like this is what you want to have. And of course there are more than one ways to skin a cat.
HTML:
<div class="centerpanel">
<div class="left">L</div>
<div class="right">R</div>
<div class="clearfix"></div>
</div>
CSS:
.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.centerpanel div{
width: 50%;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
clear: both;
}
jsFiddle: http://jsfiddle.net/nfpdpmze/2/
Since there are only two divs here, you could also set them display: inline-block without using any flotation.
Side note:
There are of course more modern ways of clearing floating. One of them is by setting up the overflow property on the container of the divs that get floated. More about that here: https://css-tricks.com/all-about-floats/
You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.
HTML:
<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>
CSS:
div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}
Here you go:
<div style="display:flex">
<div style="text-align:center">
<span>Content1</span>
</div>
<div style="text-align:center">
<span>Content2</span>
</div>
</div>