This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 years ago.
Consider there are two divs like showing bellow.
<style>
div.main{
width: 1000px;
height: 300px;
background-color: black;
}
div.sub{
width: 500px;
height: 100px;
background-color: red;
}
</style>
<div class="main">
<div class="sub">
</div>
</div>
I want the sub div to be vertically centered not to the whole page but to the main div.
Unlike what the convention has been for the last couple of years using tables, you can do this much more intuitively with flexbox.
div.main{
width: 1000px;
height: 300px;
background-color: black;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
(Your browser support mileage may vary.)
Position your divs correctlly . Please search before requesting an answer.
<style>
div.main{
width: 1000px;
height: 300px;
position:relative;
background-color: black;
}
div.sub{
width: 500px;
height: 100px;
position:absolute;
top:0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
background-color: red;
}
</style>
<div class="main">
<div class="sub">
</div>
</div>
Use display:table and table-cell
.container {
display: table;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
border: 1px solid #000;
}
.content {
display: table-cell;
border: 1px solid #000;
display: inline-block;
text-align: left;
}
</style>
<div class="container">
<div class="content">
Test 1
<br/>
Test 2
<br/>
Test 3
</div>
</div>
http://jsfiddle.net/vxdkkeso/1/
I have made my css inside the tag and it looks good and satisfy your requirement.
<div style="width:1000px;position:fixed;z-index:210;background-color:black;">
<div style="position:relative; margin: 0 auto;width:500px;border:1px solid #000;background-color:red;height:26px;padding:5px;">
<div>
</div>
I hope my answer may helpful for you :)
Related
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;
}
I have to create a layout which looks like:
I've prepared code like:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
justify-self: end;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>
But this blue div don't want to align to the right side:
Here you can a have a preview of that:
https://jsfiddle.net/ncszob80/17/
I know that I can fix it with margin-left: auto css style for blue div.
But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
So:
we can use only flex functionalities
there needs to be some margin between red div and yellow one
blue div needs to be at the very right
How to achieve that?
You wrote:
I know that I can fix it with margin-left: auto css style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.
Actually, margin-left: auto is flex functionality. It's a feature of flex layout.
From the flexbox specification:
ยง 8.1. Aligning with auto
margins
Also see:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
In summary, just use the auto margin. It's the cleanest, simplest and most efficient solution.
My best solution for you would be to change your DOM structure a little bit - but it accomplishes what you're looking for:
.left {
display: flex;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
justify-content: space-between;
}
<div class="wrapper">
<div class="left">
<div class="red"> </div>
<div class="yellow"> </div>
</div>
<div class="right">
<div class="blue"> </div>
</div>
</div>
Basically, I wrapped your boxes in .left and .right, and then changed the .wrapper to justify-content: space-between so that the .right box is shoved to the right. Then, we make .left { display: flex; } to fix the issue with those boxes stacking without doing this, or changing the elements inside to display: inline; or display: inline-block;.
You can use nested flex boxes. Make the flex wrapper for your blue item and justify that to the end:
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blueWrap {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-end;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blueWrap">
<div class="blue"></div>
</div>
</div>
Aside from changing your DOM structure or using the margin-left: auto fix CSS Grid is fantastic for this type of layout. I know you said only Flexbox but if you don't want any of the other solutions Grid might be a nice alternative. You can mix Flex functionality within the grid as well for finer control. I do this regularly to achieve the layout I'm in need of and it works well!
Happy coding!
Here is another idea if you don't want to consider margin:auto and without changing your html but like said in the accepted answer, margin is a feature of flexbox:
.red {
width: 50px;
height: 50px;
background-color: red;
margin-right: 20px;
}
.yellow {
width: 50px;
height: 50px;
background-color: yellow;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
order:1; /*make the blue the last element*/
}
.wrapper {
display: flex;
background-color: green;
width: 100%;
}
.wrapper:after {
content:"";
flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}
<div class="wrapper">
<div class="red"> </div>
<div class="yellow"> </div>
<div class="blue"> </div>
</div>
I have enclosed an image inside a nested div .box. If it is not floated the image can be exactly centered to the .box, but when I float it left or right the center alignment goes away! I have 4 images with various sizes that need te be centered inside their own .box. How can I fix it?
HTML
<div class="con">
<div class="box">
<img src="../_images/icon-test.png">
</div>
</div>
CSS
.con {
width:300px;
height:200px;
background: #996600;
}
.box {
position:relative;
width:150px;
height:150px;
background-color: #333333;
display:table-cell;
text-align:center;
vertical-align:middle;
float:right;
}
You can use display: flex for this.
Change your display: table-cell to display: flex.
Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.
Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to #Hkidd for pointing out that this happens.
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
display: flex;
align-items: center;
justify-content: center;
float: right;
}
img {
max-width: 150px;
}
<div class="con">
<div class="box">
<img src="http://placehold.it/200x100">
</div>
</div>
Explanation
I think you have to position the img absolute, so it will be positioned absolute to its parent .box since .box is positioned relative. Also the display: table-cell; is unnecessary since the img is not inside a table.
This is what I came up with:
.con {
background: #996600;
height: 200px;
width: 300px;
}
.box {
background-color: #333333;
float: right;
height: 150px;
position: relative;
width: 150px;
}
.box img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 90%;
}
<div class="con">
<div class="box center">
<img src="http://placehold.it/120x100">
</div>
</div>
If you have a single image as in the question, you can use the line-height solution which places the image exactly in center of the .box div & use vertical-align: middle on the image. Works on all browsers & simple to understand.
Refer code:
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
text-align: center;
vertical-align: middle;
float: right;
line-height: 150px;
}
img {
height: 60px;
vertical-align: middle;
}
<div class="con">
<div class="box">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
I am a new learner in web designing and practicing websites. I want to align 2 divs in one line without using float. I have a parent div with width 1400px. I want 2 child divs of width 600px each to align next to each other and have equal margin from both sides. Below is my code. Please suggest.
Also, what changes does float make to DOM? I observed that if I use float I need to specify the height as well? Is it the case or I was making some mistake in understanding the role of float?
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
</html>
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: inline-block;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
}
you can do like this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.child1 {
background-color: #666;
width: 600px;
margin: auto;
display: inline-block;
}
.child2 {
background-color: #888;
width: 600px;
margin: auto;
display: inline-block;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Or you can Improve you css to this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.main div {
display: inline-block;
width: 600px;
margin: auto;
}
.main div.child1 {
background-color: #666;
}
.main div.child2 {
background-color: #888;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
You can use flexbox like this:
.main {
display: flex;
justify-content: space-between;
}
Can be done with:
.main div { display: inline-block; }
Expect a whitespace between the divs.
This should do the trick (at least roughly):
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: table-row;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
display: table-cell;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
display: table-cell;
}
Float is really intended to put a picture (or a similar element) on one side of the page and have the text flow around it. It's often "abused" to pack elements next to each other horizontally, but that creates its own problems.
A lot of the answers you've been given are good, and people have been doing this since CSS became a thing. Another way you can do it, and really whichever method you'd like depends solely on your circumstances is by using position:relative on the parent wrapper, and position:absolute any the child elements.
.wrapper {
border: 1px solid red;
min-height: 50vh;
min-width: 100vw;
position: relative;
}
.wrapper > div {
position: absolute;
}
.wrapper .first {
top: 0;
left: 0;
width: 48vw;
border:1px dotted green;
height:100%;
}
.wrapper .second {
top: 0;
right: 0;
width: 48vw;
border:1px dashed orange;
height:100%;
}
<div class="wrapper">
<div class="first">
This is content number 1
</div>
<div class="second">
This is content number two.
</div>
</div>
Another way is by setting the container div to display as a row, and then have the two child elements be displayed as table cells. Tables were kind of the old-go-to back before CSS became extensive (can you believe there was a time before border-radius?)
.wrapper {
display: table-row;
background-color: red;
width: 100%;
height: 50vh;
}
.wrapper > div {
display: table-cell;
width: 48%;
}
.first {
border: 1px solid orange;
}
.second {
border: 1px dotted green;
}
<div class="wrapper">
<div class="first">
First Child
</div>
<div class="second">
Second Child
</div>
</div>
Really there's a bunch, you just need to figure out which one works best for you.
I'm struggling to make one of my web pages prettier.
The page has a couple of lists that can have anywhere from 0 to 500+ elements. The lists start from different levels / y-coordinate. How can I adjust the height of the lists so that they get stretched to occupy the rest of the height in the browser, along with the page's footer? Kind of like an email client with email folders and emails listed side-by-side as scrollable lists.
Is it possible to do it without complex calculations involving heights of elements above the lists?
Here is the sample page I created to clarify the question:
http://jsfiddle.net/dilipvshah/gh2Au/
CSS
.header {
width: 800px; height: 50px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.footer {
width: 800px; height: 20px; border: solid 1px black; text-align: center; vertical-align: middle;
}
.subHeader {
display: table-cell; height: 50px; text-align: center;
}
.content {
display: table; width: 800px; text-align: center;
}
.contentInner {
display: table-row; width: 100%; text-align: center;
}
.contentLeft {
display: table-cell; width: 30%; border: solid 1px black; text-align: center;
}
.contentRight {
display: table-cell; height: 400px; border: solid 1px black; text-align: center;
}
.tableLayout {
display: table; width: 100%;
}
.tableRowLayout {
display: table-row; width: 100%;
}
.listLeft {
list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}
.listRight {
list-style: none; text-align: left; max-height: 500px; overflow-y:auto;
}
HTML
<body>
<div class="header">
Header
</div>
<div class="content">
<div class="contentInner">
<div class="contentLeft">
Left
<ul id="leftList" class="listLeft">
<li> ... </li>
[ ... ]
</ul>
</div>
<div class="tableLayout">
<div class="tableRowLayout">
<div class="subHeader">
Sub-header
</div>
</div>
<div class="tableRowLayout">
<div class="contentRight">
Right
<ul id="rightList" class="listRight">
<li> ... </li>
[ ... ]
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</body>
Adding an image to clarify the question.
The key to this is to use position:absolute with top:0;bottom:0 to ensure that the lists exactly fill up the remaining window height.
FIDDLE
Note:
I have removed the markup/css connected with tables. (This reduces a lot of the markup and css)
The javascript in the fiddle has nothing to do with the layout - it's just to create the dummy lists' content