I have this sample:
link
I want to align second div to be middle of first div...I tried to do this with vertical-align:middle but not working.
It is because we put the container display: table?
CODE HTML:
<div class="container-logo">
<div class="logo">LOGO</div>
<div class="profile-name">NAME</div>
</div>
CODE CSS:
.container-logo {
display: table;
margin: 0 auto;}
.logo{
clear: none;
float: left;
height: 57px;
width: auto;
background:red;
}
.profile-name{
float: left;
width: auto;
color: blue;
/* line-height: 22px; */
font-size: 14pt;
background:aqua;
font-family: Montserrat regular;
}
What is the problem it does not work ... Can you give me some advice please?
Thanks in advance!
EDIT:
My items must be in line and have the same height ... I just want the second div to put it in the middle of the first ... exactly the same height
<div class="container-logo">
Replace the class name.
.container-logo {
display: table;
margin: 0 auto;
vertical-align: middle;
}
.logo{
clear: none;
/*float: left;*/
height: 57px;
width: auto;
background:red;
display: table-cell;
vertical-align: middle;
}
.profile-name{
/*float: left;*/
width: auto;
/* line-height: 22px; */
font-family: Montserrat regular;
display: table-cell;
vertical-align: middle;
}
.profile-name p{
font-size: 14pt;
background:aqua;
color: blue;
padding:2px;
}
<div class="container-logo">
<div class="logo">LOGO</div>
<div class="profile-name">
<p>NAME</p>
</div>
</div>
try to remove float:left from the classes .logo and .profile-name with display:table-cell will help you fixing this.. like the below
CSS
.logo{
clear: none;
display:table-cell;
vertical-align:middle;
height: 57px;
width: auto;
background:red;
}
.profile-name{
display:table-cell;
vertical-align:middle;
width: auto;
color: blue;
/* line-height: 22px; */
font-size: 14pt;
background:aqua;
font-family: Montserrat regular;
}
Fiddle Demo
Use table-cell for inner divs and remove floats:
.container-logo {
display: table;
margin: 0 auto;
}
.logo{
clear: none;
/* float: left; */
height: 57px;
width: auto;
background:red;
}
.profile-name{
/* float: left; */
width: auto;
color: blue;
/* line-height: 22px; */
font-size: 14pt;
background:aqua;
font-family: Montserrat regular;
}
.container-logo > div{
display: table-cell;
vertical-align: middle;
}
<div class="container-logo">
<div class="logo">LOGO</div>
<div class="profile-name">NAME</div>
</div>
Or inline-block if you want to get like this fiddle.
If you want your second div inside first one then write your html like this
<div class="container-logo">
<div class="logo">LOGO
<div class="profile-name">NAME</div>
</div>
</div>
and in your css do something like this
.container-logo {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
max-width: 50%;
padding: 15px;
}
.logo{
clear: none;
float: left;
height: 57px;
width: auto;
background:red;
}
https://jsfiddle.net/hq8q8eqg/7/
Related
I know this must be a very simple question but I am having trouble in auto adjusting the height of text based div. Basically I am displaying two horizontal divs in a row. One is text based and the other is image based. Image based div is always auto adjusting its height but text based div is not auto resizing its height accordingly. May be it is because of the padding I have added but don't know how to adjust it according to different screen resolutions. Please find the below two screenshots for better understanding.
Desktop View:
Mobile or Tablet View:
Below is the code for reference:
<style>
.container {
display:block;
width:100%;
}
#custom-section2 .left, #custom-section2 .right {
float: left;
width: 50%;
}
#custom-section2 .left {
background-color: #F7E3EC;
height: 464.67px;
}
#custom-section2 .right {
background-color: #FFF;
}
.section2-with-text1{
padding-top: 15%;
font-size: 2vw;
font-family: 'Arial';
letter-spacing: 0.1em;
}
.section2-with-text2{
padding-top: 5%;
font-size: 1.4vw;
font-family: 'Arial';
}
.section2-with-text3{
padding-top: 15%;
}
.section2-with-text3 .button {
background-color: #000;
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
display:inline-block;
}
.img-style{
height: auto;
}
#media only screen and (min-width:1901px) {
#custom-section2 .right img{
height: 660px;
}
#custom-section2 .left{
height: 660px;
}
}
#media only screen and (max-width:1900) {
#custom-section2 .right img{
height: auto;
}
#custom-section2 .left{
height: auto;
}
}
#custom-section2 .right img{
width: 100%;
}
</style>
<div class="container" id="custom-section2">
<div class="right">
<img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
</div>
<div class="left">
<div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
<div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
<div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
</div>
</div>
Please suggest a possible solution. I would be grateful.
Thank you
Instead of using float to horizontally align your elements, it would be much easier to use display: flex;
Using flex will keep the left and right elements the same height.
Also note: You'll need to remove the height: 464.67px; declaration in #custom-section2 .left and remove float: left; from #custom-section2 .left, #custom-section2 .right.
(see all my comments in the CSS code)
Like so: (run code snippet)
.container {
display:block;
width:100%;
}
#custom-section2 {
display: flex; /*Add this!*/
}
#custom-section2 .left, #custom-section2 .right {
width: 50%;
/*float: left;*/ /*remove this!*/
}
#custom-section2 .left {
background-color: #F7E3EC;
/*height: 464.67px;*/ /*Remove this!*/
}
#custom-section2 .right {
background-color: #FFF;
}
.section2-with-text1{
padding-top: 15%;
font-size: 2vw;
font-family: 'Arial';
letter-spacing: 0.1em;
}
.section2-with-text2{
padding-top: 5%;
font-size: 1.4vw;
font-family: 'Arial';
}
.section2-with-text3{
padding-top: 15%;
}
.section2-with-text3 .button {
background-color: #000;
border: none;
color: white;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
display:block;
}
/*.img-style{
height: auto;
}/*
/* You can remove all this: */
/*#media only screen and (min-width:1901px) {
#custom-section2 .right img{
height: 660px;
}
#custom-section2 .left{
height: 660px;
}
}
#media only screen and (max-width:1900) {
#custom-section2 .right img{
height: auto;
}
#custom-section2 .left{
height: auto;
}
}*/
#custom-section2 .right img{
width: 100%;
height: auto; /*Add this!*/
display: block; /*Add this!*/
}
<div class="container" id="custom-section2">
<div class="right">
<img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
</div>
<div class="left">
<div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
<div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
<div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
</div>
</div>
I'm attempting to vertically align 2 divs with different heights and widths, which I've horizontally centered on the page. Text-align doesn't appear to do anything, and I was hoping that there was a solution that I'm missing.
CSS
.center {
text-align: center;
}
div#map {
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
display: inline-block;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
HTML
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
Just add vertical-align: middle:
div#map,
div.contact {
vertical-align: middle;
display: inline-block;
}
.center {
text-align: center;
}
div#map {
vertical-align: middle;
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
vertical-align: middle;
display: inline-block;
background: green;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
I'd set text-align: left for the .contact div and vertical-align: middle for both (since they are inline-blocks)
http://codepen.io/anon/pen/QdNaoJ
You can use flexbox
.center {
align-items: center;
}
You can find the flexbox documentation here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
User this in your css
div#map,div.contact {
display: inline-block;
vertical-align:middle;
}
vertical-align:middle; will aling the data in middle between your div
#confirm {
background-color: #FFAE00;
width:80%;
height: 5em;
margin: 0 auto;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
How to make this image and text center and vertical-align of div?
Use display:flex to parent div. and give justify-content: center; and align-items: center; to make them center.
#confirm {
align-items: center;
background-color: #ffae00;
display: flex;
height: 5em;
justify-content: center;
margin: 0 auto;
width: 80%;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
Edit:
You can use display:inline-block if you don't want to use display:flex.
#confirm {
background-color: #ffae00;
height: 5em;
margin: 0 auto;
text-align: center;
width: 80%;
}
img {
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
are you looking to do this:
<style>
#confirm {
background-color: #FFAE00;
width:80%;
margin: 0 auto;
}
</style>
<div id="confirm">
<div style="clear:both; margin-right:40px"><img src="http://i.imgur.com/mdb6Noh.png"></div>
<span>Confirm</span>
</div>
Please use below CSS :
#confirm {
background-color: #ffae00;
display: table;
margin: 0 auto;
}
#confirm span{
display: table-cell;
margin: 0 auto;
vertical-align: middle;
width: 80%;
}
#confirm img{
display: table-cell;
float: left;
margin-right: 20px;
}
<div id="confirm">
<img src="http://i.imgur.com/mdb6Noh.png">
<span>Confirm</span>
</div>
please use image as vertical align in middle in css rule
like
#confirm{
text-align:center;
}
#confirm img{
vertical-align:middle;
}
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
float: right;
display: table-cell;
vertical-align: middle;
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
How do i center my div[slogan] without using negative margin/top 50%?
you don't need floats when using display: table/table-cell ... this should center the .slogan div using the table-cell layout.
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
/*float: left; NOT THIS */
width: 30px;
display: table-cell; /* THIS */
}
.slogan
{
/*float: right; NOT THIS */
display: table-cell;
vertical-align: middle;
text-align: right; /* THIS */
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
If you are looking to middle slogan vertically then please check the fiddle https://jsfiddle.net/nileshmahaja/e6byt6zt/
CSS
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
vertical-align:middle;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
display: table-cell;
vertical-align: middle;
text-align:right;
}
change your slogan class with this
.slogan {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
You should use 'margin: 0 auto ;' on the . If you want to align text inside the div you can just use 'text-align: center ;'.
Check this post click