This question already has answers here:
How to center align img wrapped in SPAN tag?
(5 answers)
How to center the center circle?
(4 answers)
Closed 3 years ago.
How to center image in <span> tag?
<div class="col-1">
<span class="dot">
<h:graphicImage library="imgs" name="campus.png" width="25" height="25" style="align-content-center"/>
</span>
</div>
dot css
.dot {
height: 75px;
width: 75px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
Don't worry about h:graphicImage, it is a JSF tag which translates to <img> in html. Any html class can be applied to it.
I am using Bootstrap 4.3.
Try Display Flex and align items and justify content to center.
.dot {
height: 75px;
width: 75px;
background-color: #bbb;
border-radius: 50%;
display: flex;
align-items:center;
justify-content:center;
}
.dot {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"><img class="dot" src="campus.png"/></div>
<div class="col-sm-4"></div>
</div>
I gave this a try, I couldn’t comment so I had to code this. I used position: absolute. Hope this helps!
.dot {
height: 75px;
width: 75px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.campus {
position: absolute;
top: 11.5%;
left: 8%;
transform: translate(-50%, -50%)
}
<div class="col-1">
<span class="dot">
<img src="https://pngimage.net/wp-content/uploads/2018/05/campus-png-5.png" width="25" height="25" style="align-content-center" class="campus"/>
</span>
</div>
Related
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>
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>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
In css how to center a div in between a div without touch the property of parent div. Only change the property of Child Div... Like:
<div style="width: 200px; height: 200px; display: flex; background: #f00;">
<div style="height: 50px; width: 50px; background: green;">
<!-- Change the property of this div -->
</div>
</div>
I don't want to need parent css change.. anything else what can you do...
Just add margin: auto; to your child div.
.parent {
width: 200px;
height: 200px;
display: flex;
background: #f00;
}
.child {
height: 50px;
width: 50px;
background: green;
margin: auto;
}
<div class="parent">
<div class="child">
<!-- Change the property of this div -->
</div>
</div>
Why can't you put styles on the parent? Anyways:
.parent {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
.child {
display: block;
width: 20px;
height: 20px;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: green;
}
<div class="parent">
<div class="child"></div>
</div>
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 do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
I try to to set vertical align of elements that exist into a div tag to center.
Please advice
<div class="new_div">
<h3>نام من</h3>
<p>توضیحات من</p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
css
.new_div {
position: absolute;
width: 100%;
text-align: center;
}
You can use display: table-cell;
Jsfiddle
body,
html {
position: relative;
margin: 0;
padding: 0;
}
.new_div {
position: absolute;
width: 100%;
text-align: center;
display: table;
height: 200px;
background-color: red;
}
.container {
display: table-cell;
vertical-align: middle;
}
<div class="new_div">
<div class="container">
<h3>نام من</h3>
<p>توضیحات من</p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
</div>
For vertical center? Try something along the lines of
.new_div {
width: 100%;
height: 100px;
line-height: 100px; /* Same as new_div height */
}
You could try to
use the display attribute
in combination with the vertical-align attribute
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
<h3>نام من</h3>
<p>توضیحات من </p>
<button class="btn btn-primary">بیشتر ...</button>
</div>
</div>
</div>