This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 7 months ago.
Could someone explain what the problem is in the code? No matter what I do, even taking out all the styles I can't align in the middle.
.Div1 {
vertical-align: middle;
height: 100%;
width:100%;
position: relative;
min-height: 100px;
background: linear-gradient(180deg, rgba(0,113,142,1) 0%, rgba(119,111,111,0.8855917366946778) 80%);
}
.Div2 {
position: absolute;
top:75px;
bottom: 0;
text-align: center;
font-size: 12px;
}
<div class="Div1">
<p>I-BS</p>
<div class="Div2">
<p>
<font size="auto"> <strong>CRONOGRAMA CLUSTER; &nbs; EMBARCAÇÃO&;   ;SAÍDA </strong>
</font>
</p>
</div>
</div>
I would recommend using flex instead by replacing
vertical-align: middle;
with
display: flex;
align-items: center;
.Div1 {
display: flex;
align-items: center;
height: 100%;
width:100%;
position: relative;
min-height: 100px;
background: linear-gradient(180deg, rgba(0,113,142,1) 0%, rgba(119,111,111,0.8855917366946778) 80%);
}
.Div2 {
position: absolute;
top:75px;
bottom: 0;
text-align: center;
font-size: 12px;
}
<div class="Div1">
<p>I-BS</p>
<div class="Div2">
<p>
<font size="auto"> <strong>CRONOGRAMA CLUSTER; &nbs; EMBARCAÇÃO&;   ;SAÍDA </strong>
</font>
</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>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I'd like to have a horizontally and vertically centered cards. I've done it like this.
*{
margin: 0;
padding: 0;
}
.wrapper{
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards{
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
However, the vertical center doesn't occur (just the horizontal).
The same happens when I try it with the "text" class.
Thank you for your help :)
In order to center align content, you need at least 1 defined height so the container knows where the "center" is. With flexbox it's as easy then setting justify-content: center and align-items: center to make sure any flex item goes to the center of the container.
What you are missing in your code, is a height for the cards container. You could set a number for it, or just heigth: 100% so it takes the full height of its own container (wrapper) which is 700px
body {
margin: 0
}
.flex-item {
border: 1px solid black;
height: 100px;
width: 150px
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="flex-container">
<div class="flex-item"></div>
</div>
Here's your code
* {
margin: 0;
padding: 0;
}
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
}
.cards {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card {
width: 100px;
height: 250px;
background-color: chartreuse;
border: crimson 2px solid;
}
<div class="wrapper">
<div class="text">
<p>Lorem ipsum</p>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Simple, set margin: 0 auto; on the main container that holds everything together. In your case, that appears be the main <div> with the wrapper class:
.wrapper {
background-color: darkkhaki;
width: 700px;
height: 700px;
margin: 0 auto;
}
That should do the trick.
Simply add the total height (100% or 100h) to the cards class.
.cards{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Logo image and H1 heading on the same line
(13 answers)
Closed 3 years ago.
I'm working on trying to create a website, and I want an image to appear to the right side of the title I have picked, but I cant find any way to align them that properly works.
.title {
background-color: white;
color: black;
width: 680px;
}
.logo {
width: 100px;
height: 100px;
}
<div class="title">
<h1>
<font size="+10" /><u/>Computer Science A-Level Notes</h1>
<img class="logo" src="breh.png">
</div>
can anyone tell me what I can do?
There are a lot of ways to align two elements horizontally. The two modern way to achieve this is to rely on flexbox or css grid.
Here is a basic usage of flexbox:
.title {
background-color: white;
color: black;
width: 680px;
}
.logo {
width: 100px;
height: 100px;
}
div {
display: flex;
flex-direction: row;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo" src="https://via.placeholder.com/100x100">
</div>
Related to Flexbox: center horizontally and vertically
Try this:
.title{
background-color: white;
color: black;
width: 680px;
display: inline-flex;
}
.logo{
width: 100px;
height: 100px;
float: right;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo"src="images/1.jpeg">
</div>
Here is how you can do it with flexbox.
.title {
display: flex;
align-items: center;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo"src="https://picsum.photos/200/200">
</div>
You need to make both things inside the .title class have a inline-block alignment, and for the best look you should set the vertical-align property on both.
.title {
background-color: white;
color: black;
width: 680px;
}
.title h1 {
display: inline-block;
vertical-align: middle;
}
.title .logo {
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
<div class="title">
<h1>Computer Science A-Level Notes</h1>
<img class="logo" src="https://placehold.it/100x100">
</div>
You can also do it without using flexbox
by simply applying this css
.title{
background-color: white;
color: black;
width: 680px;
}
.title *
{
float:left;
}
.logo{
width: 100px;
height: 100px;
}
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I am trying to align the icons and text within the boxes here:
I can't seem to get the "Store Locator" and icon to align horizontally.
Can anyone please help me achieve this?
My html:
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator <--- problem line
</div>
</div>
Try to use display:inline-flex here
#container {
text-align: center;
max-width: 960px;
margin: 0 auto;
}
.block {
width: 300px;
height: 120px;
margin: 10px;
display: inline-flex;
background: #3f3f3f;
border-radius: 5px;
font-size: 22px;
align-items: center;
justify-content: center;
}
#phone {
color: yellow;
}
#chat {
color: green;
}
#email {
color: white;
}
#store-locator {
color: grey;
}
.store {
background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
background-position: -432px 2px;
position: relative;
right: 10px;
background-size: 1800% auto;
height: 32px;
width: 32px;
display: inline-block;
}
<div id="container">
<div id="phone" class="block">Phone</div>
<div id="chat" class="block">Live Chat</div>
<div id="email" class="block">Email</div>
<div id="store-locator" class="block">
<span class="store"></span> Store Locator
</div>
</div>
I'm trying to align an image in the center of the page while also aligning some text to the right of the image. How would I do this in either css or html?
Here is my current attempt at this:
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Right now the image is not centered and the text is not centered vertically with the image
Here is a visual representation of what I would like it to look like in the end:
Solution 1:
You can use a div to wrap the image and the text in and use text-align: center along with vertical-align: middle.
.center-img,
.center-txt {
display: inline-block;
vertical-align: middle;
}
#wrapper {
text-align: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Solution 2:
Alternatively, you can use a div to wrap the image and the text in and use flexbox. Use justify-content to center your elements horizontally and align-items: center to align them vertically.
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Now to center the above wrapper to the middle of the screen you can use:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example:
.center-img,
.center-txt {
display: inline-block;
}
#wrapper {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<img src="http://placehold.it/100x100" class="center-img" />
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
We have a wrapper - div. Div have size 100% width and height of viewport. I give background to div pics and linear-gradient for darken. Div is a flex-block. Inner content aligned to center with justify-content (horizontal) and align-items (vertical). Its all.
ps: Sorry, sorry. Not its all. We go to drink a beer with this ladies. :)))
* {
padding: 0;
margin: 0;
}
div {
background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
img {
margin-right: 1em;
}
<div class="wrapper">
<img src="http://beerhold.it/100/100">
<p>Lorem ipsum</p>
</div>
To center the image use
img.center{
display:block;
margin:0 auto;
}
wrap both image and text inside a container and add display:flex to it.
then, to center them use align-items: center; and justify-content: center;
see below snippet. let me know if it works for you
for more info about how to center vertically see here -> Vertical Centering with Flexbox
.center-img {
display: inline-block;
margin: 0 auto;
}
.center-txt {
display: inline-block;
}
.container {
width:500px;
height:500px;
border:2px solid red;
display: flex;
align-items: center;
justify-content: center;padding:0 15px;}
<div class="container">
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
</div>
Just add vertical-align: middle; to class center-img
The vertical-align property sets the vertical alignment of an element.
Using middle place it in the middle of the parent element
.center-img {
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.center-txt {
display: inline-block;
}
<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
<h1>Home</h1>
</div>
Use this-
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>
Refer to this link.
<div class="container">
<img src="img.jpg"/>
<div class="text">
text
</div>
</div>
.container{
text-align:center;
}
img, .text{
display:inline-block;
}
Like this: https://jsfiddle.net/jn4rktaa/
HTML:
<div class="outside">
<div class="inside">
<img src='/img/file.jpg' class="img" />
Test Text
</div>
</div>
CSS:
.outside {
width: 800px;
height: 600px;
border: 1px solid red;
position: relative;
}
.inside {
position: relative;
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}
.img {
float: left;
}