This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
.right {
float: right;
border: 3px solid #73AD21;
}
<div>
<div class="right">
<p>testtesttest.</p>
</div>
<div style="text-align: center;">
<h2>Middle</h2>
<p>blablabla</p>
</div>
</div>
I want that the Middle is centered and the other box is on the right. In my code the Middle is not centered. How can I do that?
I hope this is what you are expecting.
.text {
text-align: center;
background-color: red;
}
.container {
position: relative;
}
.right {
position: absolute;
right: 0;
width: fit-content;
text-align: center;
top: 50%;
transform: translateY(-50%);
border: 3px solid #73AD21;
}
<div class="container">
<div class="right">
<p>testtesttest.</p>
</div>
<div class="text">
<h2>Middle</h2>
<p>blablabla</p>
</div>
</div>
U mean to have it look something like this ?
But this has BIG drawback, that if caption is too long it will overflow the div on the right.
.main {
position: relative;
}
.right {
//float: right;
position: absolute;
right: 0;
border: 3px solid #73AD21;
}
<div class="main">
<div class="right">
<p>testtesttest.</p>
</div>
<div style="text-align: center;">
<h2>Middle</h2>
<p>blablabla</p>
</div>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How to center a "position: absolute" element
(31 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
This is my first post. Just as the title says, I am not able to center content inside of a div. Here is my code:
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
position: absolute;
bottom: 25px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->
Can someone help me center this content inside of the div? It is currently aligned left. Thanks!
You need remove position: absolute and change display from table-cell to block.
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
bottom: 25px;
display: block;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
display: block;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
top: 25px;
display: block;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->
try to simplify your CSS as much as possible otherwise, there will be clashes and things like text-align:center won't work. https://www.w3schools.com/ is a great source when it comes to CSS.
.main{text-align:center}
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<div class='main'>
<div class="coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<h2>middle center</h2>
<p>middle center</p>
</div>
<p >bottom center</p>
</div>
I am trying to align 3 boxes and 2 images.
2 boxes vertically with there is an img between
3rd box standing right of them with an arrow img pointing it like this:
Example box css:
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
Use flexbox and divide to 3 section(3 divs) inside the wrap div
.wrap{
display:flex;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
.img1 img{
width: 80px;
height: 150px;
}
.part2 img{
width: 150px;
height: 80px;
}
.part2,.part3{
margin-top: 100px;
}
.part3 .box{
margin-left: 40px;
}
<div class="wrap">
<div class="part1">
<div class="box">
</div>
<div class="img1">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="box">
</div>
</div>
<div class="part2">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="part3">
<div class="box">
</div>
</div>
</div>
If you have constant number of elements. (3 boxes and 2 images with fixed width and height), you can create wrapper box with relative position, then add position absolute to child nodes and write needed positions. for example:
.wrapper {
width: 100%;
box-sizing: border-box;
position: relative;
}
.child-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can use flexbox to position your boxes by rows and columns.
#cont1 {
display:flex;
flex-direction:row;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
border: solid 3px #8B0000;
}
<div>
<div class="box">Box 2
</div>
<div id="cont1">
<div> IMG1 </div>
<div> IMG2 </div>
<div class="box">Box 3</div>
</div>
<div class="box">
Box 1
</div>
</div>
You should try to use the float/clear attribute:
.box1{
float: left;
}
.box2{
float: right;
}
.image{
float: left;
}
.box3{
float: left;
}
Afterwards just use position: relative within your classes fix the positioning.
This question already has answers here:
Horizontally & Vertically centering 2 divs within two side by side 50% width columns
(1 answer)
2 side by side divs centered?
(3 answers)
Align 2 divs side by side in a parent
(4 answers)
Closed 4 years ago.
How can I put two centered divs next to each other, with some padding in between? I've tried display: inline but that doesn't seem to work.
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
}
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text</div>
</div>
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text 2</div>
</div>
(Note: I'm also looking for a way to make the blue text-elipse a circle, but that's a different question I suppose.)
Use display:inline-block in your .my-container to align them side by side...
Also you will need to wrap your .my-container divs into a wrapper div with text-aign:center to align the inner inline items to center
.wrapper {
text-align: center;
}
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
display: inline-block;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
}
<div class="wrapper">
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text</div>
</div>
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text 2</div>
</div>
</div>
You should add display: inline-block; to my-container class.
.my-container {
position: relative;
text-align: center;
color: red;
width: 20%;
margin: auto;
display: inline-block;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
}
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text</div>
</div>
<div class="my-container">
<img src="https://demo.keypasco.com/res-1.2.2/img/User_ring.png" style="width:100%;">
<div class="centered">text 2</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm trying to center div's inside one outter div, but I can't.
My html is something like this :
<div class="outterDiv">
<div class="innerDivBig">
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="clear:both"/>
</div>
</div>
And my css is something like this :
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align: center;
}
.innerDivBig{
margin: 0 auto;
display:table;
}
Here is jsfiddle.
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align:center;
}
.innerDivBig{
display: inline-block;
}
https://jsfiddle.net/2a8514nf/7/
UPDATE:
https://jsfiddle.net/2a8514nf/4/
I use display: table because the browser calculates the width to fit all the child elements width display: table-cell so that you wont have to worry about the width.
I also use padding instead of margin since it does not expand the element so the parent size remains the same.
.outer {
width: 500px;
border: 1px solid #000;
padding: 15px;
margin: 0 auto;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
padding: 0 5px;
text-align: center;
}
.inner > div > div {
padding: 15px;
text-align: center;
border: 1px solid #00F;
}
<div class="outer">
<div class="inner">
<div>
<div>Inner Div 1</div>
</div>
<div>
<div>Inner Div 2</div>
</div>
<div>
<div>Inner Div 3</div>
</div>
</div>
</div>
I am not able to vertically align middle some text using the position absolute method.
JSFIDDLE
HTML
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
CSS
.heighted {
background: gray;
height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
I am getting Stack Overflow error when adding code, it might be a bug in Stack Overflow, so please follow the link.
Set line-height: 100px; to .heighted or .middle-wrapper or .middle - DEMO
CSS:
.heighted {
background: gray;
height: 100px;
line-height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
HTML:
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
You should try display:table-cell; and use vertical-align:middle;
Check how amazing and optimize:
http://jsfiddle.net/9jugdtqx/2/
and:
http://jsfiddle.net/9jugdtqx/3/