I'm trying to have 3 left aligned floats. Here's the following JFiddle that does it.
div { height: 45px; }
div.side {
background-color: skyblue;
width: 72px;
float: left;
}
div#range {
background-color: tomato;
width: 216px;
float: left;
}
span {
width:100%;
text-align: center;
display: block;
margin: 3px auto;
/* background-color: gold; */
}
<div id="start" class="side">
<button type="button">Click Me!</button>
</div>
<div id="range"></div>
<div id="end" class="side">
<button type="button">Click Me!</button>
</div>
What I'm trying to do now is center align the buttons within the div called side. I've tried using another div with it's text-align set to center, but that doesn't work.
The text-align: center applied to .side divs should do the trick, because button elements are inlines by default. Note, I changed .side's widths to make the centering effect noticeable: https://jsfiddle.net/021gu79c/1/.
CSS:
div.side {
background-color: skyblue;
width: 120px;
float: left;
text-align: center;
line-height: 45px;
}
I guess he means horizontal, based on the text-align property.
Hav you tried to add a wrapper div around the Buttons with
.btn-wrapper{
position: absolute;
left:40%;
right:40%;
Maybee that's working for you
Related
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
.overlaping:hover {
overflow: visible;
}
.wrapper {
height: 200px;
width: 100%;
background: lightblue;
}
<div class="wrapper">
<div class="overlaping">
Some longer text
</div>
<div class="overlaping">
Other div
</div>
</div>
I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?
By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add
.overlaping {
vertical-align: top;
}
Probably you should change the height instead of the overflow setting.
Also add the min-height and float to the boxes.
.overlaping{
width: 14.2%;
min-height: 50px;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background:yellow;
overflow:hidden;
float: left;
}
.overlaping:hover{
height: auto;
}
.wrapper{
height:200px;
width:100%;
background:lightblue;
}
<body>
<div class="wrapper">
<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>
<div class="overlaping">
Other div
</div>
</div>
</body>
Modify .overlapping style as shown below
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
float:left;
margin-right:5px;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my JSFiddle: https://jsfiddle.net/kris_redden/34jyLpok/
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
}
.wrapper-div {
vertical-align: middle
}
.button {
background: #e8e8e8;
display: inline-block;
font-size: 12px position: relative;
}
<div class="modal-footer">
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
</div>
I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do.
Easiest would be to add the following to .modal-footer
display: flex;
align-items: center;
this can also be achieved by using
.button-container{
position:relative;
height:100%;
}
.button{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
vertical-align:middle; is not necessary here. i would use this method if button container height is unknown and if i could not use flex-box (dispaly:flex;) instead.
https://jsfiddle.net/34jyLpok/7/
another option is to use flex-box (display:flex;)
.button-container{
height:100%;
display: flex;
//flex-direction: column;//only vertical
align-items: center;//both vertical and horizonal
justify-content: center
}
.button{
width:100px;
}
the problem with display: flex is that it is not fully supported in old IE browser versions.
https://jsfiddle.net/34jyLpok/9/
.modal-footer {
display: table;
width: 100%;
}
.wrapper-div {
display: table-cell;
vertical-align: middle
}
Go for something like this. Here is the fiddle.
You can use flexbox as shown below
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display: flex;
align-items: center;
justify-content: center;
}
You can change your style to this
.modal-footer {
background-color: #2A3E5D;
color: white;
height: 100px;
padding: 2px 16px;
display:table;
width: 100%;
}
.wrapper-div {
display:table-cell;
vertical-align: middle;
}
.button {
background: #e8e8e8;
display: block;
margin:auto;
font-size: 12px
position: relative;
}
You can remove margin:auto; from .button to only vertically center button
See on fiddle
This is one way of doing it.
.wrapper-div {
line-height: 60px; // ex: 60px, The button will center to line-height.
}
.wrapper-div button {
// height of button must be less than its parent.
height: 30px;
display: inline-block;
vertical-align: baseline;
}
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
<button type="button" class="button"> Submit Filters </button>
</div>
I'm trying to align three divs horizontally but facing some problems.
I'm doing this to build some modals.
Thanks!
html code
<div id="modal-wrapper">
<div class="modal-body"></div>
<div class="modal-body-2"></div>
<div class="modal-body-3"></div>
</div>
css code
.modal-body{
float:left;
width: 100%;
}
.modal-body-2{
margin-left: 100%;
width:100%;
padding: 15px;
}
.modal-body-3{
margin-left: 200%;
width:100%;
padding: 15px;
}
#modal-wrapper{
display: inline-block;
width: 100%;
margin: 0 auto;
}
Here is a JSFiddle I made: http://jsfiddle.net/5m1n8p0q/1/. You're spacing each element the entire width of a page. With a 3 div layout, you want just 1/3 or 33% of the width. I placed a padding-right property of 0.5px to mitigate the gap between a 33% and 33.33...% width.
HTML:
<div class="modal-body">asdf</div>
<div class="modal-body-2">asdf</div>
<div class="modal-body-3">asdf</div>
CSS
.modal-body{
float:left;
width: 33.3%;
background: red;
}
.modal-body-2{
display: inline-block;
width: 33.3%;
background: blue;
}
.modal-body-3{
float: right;
width: 33.3%;
background: green;
padding-right: 0.5px;
}
How would you go about positioning the text in this <button> in the upper left or bottom right (or whatever)? I can't figure out what's causing it to vertically align the way it is, or how to override it.
<button>
<time>Foo</time>
<br />
<span>Bar</span>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
example jsfiddle
Wrap your inner elements in a div and set the position on the button to relative, and the position on the div to absolute like this jsFiddle example:
<button>
<div>
<time>Foo</time>
<br /> <span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
position:relative;
}
div {
position:absolute;
bottom:0;
right:0;
}
Surround the text in a div, set a class on the div. Use custom css on that div to move it where ever you want.
<button>
<div class="move">
<time>Foo</time>
<br />
<span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
.move{
padding-top:50px;
}
See here: http://jsfiddle.net/gzTax/
If you're looking for a solution that lets you change the alignment without any additional markup, you can try playing around with the padding. For example, reduce the height and increase the padding-top value.
For example: http://jsfiddle.net/hNs7q/14/
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/