This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
An image of the web page:
I want to put the button in the middle of the first box. I have followed a tutorial from w3 schools but it puts the button in the middle of webpage instead of putting it in the middle of the first box.
My code:
.menus{
display: flex;
justify-content: space-evenly;
}
.menu{
background-color: orange;
border: 3px solid grey;
width: 98vh;
height: 98vh;
}
.menu1{
min-height: 50px;
}
.menu2{
min-height: 50px;
}
.menu1 h1{
magin-top: 50px;
text-align: center;
}
<div class="menus">
<!-- program -->
<div class="menu menu1">
<h1></h1>
<button>button</button>
</div>
<!-- items -->
<div class="menu menu2"></div>
</div>
You can use Flexbox in your .menu1 class.
.menus{
display: flex;
justify-content: space-evenly;
}
.menu{
background-color: orange;
border: 3px solid grey;
width: 98vh;
height: 98vh;
}
.menu1{
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.menu2{
min-height: 50px;
}
.menu1 h1{
magin-top: 50px;
text-align: center;
}
<div class="menus">
<!-- program -->
<div class="menu menu1">
<h1></h1>
<button>button</button>
</div>
<!-- items -->
<div class="menu menu2"></div>
</div>
you can use:
<!DOCTYPE html>
<html>
<head>
<style>
.center-div {
display: flex;
align-items: center;
justify-content: center;
}
.parent{
width: 500px;
height: 500px;
background: #555
}
</style>
</head>
<body>
<div class="center-div parent">
<button>button</button>
</div>
</body>
</html>
Add flexbox-settings as shown below to .menu1. This will center all contents of .menu1(alternative solution below):
.menus{
display: flex;
justify-content: space-evenly;
}
.menu{
background-color: orange;
border: 3px solid grey;
width: 98vh;
height: 98vh;
}
.menu1{
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.menu2{
min-height: 50px;
}
.menu1 h1{
magin-top: 50px;
text-align: center;
}
<div class="menus">
<!-- program -->
<div class="menu menu1">
<h1></h1>
<button>button</button>
</div>
<!-- items -->
<div class="menu menu2"></div>
</div>
Second solution added after comment, which only centers button, but leaves other contents of .menu1 as is.
Note the settings for .menu1 and .menu1 button.
.menus {
display: flex;
justify-content: space-evenly;
}
.menu {
background-color: orange;
border: 3px solid grey;
width: 98vh;
height: 98vh;
}
.menu1 {
min-height: 50px;
position: relative;
}
.menu1 button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu2 {
min-height: 50px;
}
.menu1 h1 {
margin-top: 50px;
text-align: center;
}
<div class="menus">
<!-- program -->
<div class="menu menu1">
<h1></h1>
<button>button</button>
</div>
<!-- items -->
<div class="menu menu2"></div>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 5 months ago.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
hi I just started learning coding.I wanted to create a rwd page.Now I'm facing a problem is that I want to move my main area to the center of the page but I couldn't do it. I've tried to add display:flex to body. But everything would move. Should I add a div in the main? Can't figure it out. What should i do now? Here's the code.Thanks
You want to center the main element right?
main{
width: 1200px;
background-color: #76a5d5;
/*See here 10px will be used for top and bottom and for left and right
it will automatically divide equally both sides using auto.
*/
margin: 10px auto;
display: flex;
justify-content: center;
}
Try replacing this ruleset in your css.
Using auto for the left and right margin gives the desired result.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px auto;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
Answer
You can do this with CSS align-self property.
First, we need give the <body> display flex and set the direction to column (vertical).
body {
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column; /* this change the direction to vertical */
}
then change the main area to center
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center; /* this move the element to center */
}
Demo
header{
display: flex;
justify-content: space-between;
}
nav{
display: flex;
text-align: right;
align-items: center;
}
body{
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column;
}
.logo{
text-align: left;
align-items: center;
}
.menu{
margin-left: 10px;
}
a{
text-decoration: none;
color:#000000;
}
.welcome{
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1{
font-size: 40px;
}
main{
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center;
}
main>.item{
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="RWDstyle.css"/>
<title>RWD test</title>
</head>
<body>
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
</body>
</html>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
I am using flex-wrap. if textBox are more then width available in container
and in the end there is add button now if things are in single line it's look perfect
but if there are more textBox then width available it shift to next line thats fine but because of that there is too much space left between button and text box
which looks very odd.. i tried many ways but didn't get succeed to place button just next to textBox of 1st line.
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
If you add a rule for the individual flex-lines like justify-content: space-between; Or jsutify-content: space-evenly. It will adjust to whatever number of Elements you add and display them in a more responsive way. See the examples below.
Edit: at the end you can find a 3rd example which uses specific margin-rules instead of flex-rules. I personally dont prefer this but it could look neater in your case.
with space-between
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
with space-evenly
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
margin-rules, commented the css code where i changed it
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
/*new margin-rules*/
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 3 years ago.
Trying to center a search field (using flex box) inside a toolbar so that it aligns perfectly with cards contained inside a container below the toolbar.
The yellow search field should be align with the orange cards below it.
The logo is supposed to be self aligned to the left and the menu should be self aligned to the right. I thought justify-self: start | end would do this ...
This is a demo:
h1, h2 {
font-family: Lato;
}
body {
margin: 0px;
}
main {
display: flex;
margin: 0 auto;
}
.Toolbar {
display:flex;
align-items: center;
height: 3.5rem;
width: 100%;
background-color: lightgrey;
}
.Logo {
justify-self: start;
margin-left:10px;
width: 40px;
height:40px;
background-color: orange;
}
.SearchField
{
justify-self:center;
width: 200px;
height:40px;
background-color: yellow;
}
.Menu {
justify-self: end;
width: 40px;
height:40px;
background-color: orange;
}
.Card {
width: 200px;
height:200px;
margin: 1rem;
background-color: orange;
}
.CardContainer {
display: flex;
margin: 0 auto;
flex-direction:column;
}
<div id="app"></div>
<div class="Toolbar">
<div class="Logo">
Logo
</div>
<div class="SearchField">
Search Field
</div>
<div class="Menu">
Menu
</div>
</div>
<main>
<div class="CardContainer">
<div class="Card">
</div>
<div class="Card">
</div>
</div>
</main>
This is as close as you're gonna get it.
By the way, you can only use align-self in flex children, there is no justify-self.
h1, h2 {
font-family: Lato;
}
body {
margin: 0px;
}
main {
display: flex;
align-items: center;
flex-direction: column;
}
.Toolbar {
display:flex;
align-items: center;
justify-content: space-between;
height: 3.5rem;
width: 100%;
background-color: lightgrey;
}
.Logo {
width: 40px;
height:40px;
background-color: orange;
}
.SearchField
{
width: 200px;
height:40px;
background-color: yellow;
}
.Menu {
width: 40px;
height:40px;
background-color: orange;
}
.Card {
width: 200px;
height:200px;
margin: 1rem;
background-color: orange;
}
.CardContainer {
display: flex;
flex-direction: column;
}
<div id="app">
<div class="Toolbar">
<div class="Logo">
Logo
</div>
<div class="SearchField">
Search Field
</div>
<div class="Menu">
Menu
</div>
</div>
<main>
<div class="CardContainer">
<div class="Card">
</div>
<div class="Card">
</div>
</div>
</main>
</div>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 1 year ago.
There is 6 items in navbar:
first 3 items should be aligned as flex-start - on beginning of navbar.
Then Logo should be in center of navbar
And on the end -> flex-end should come 2 icons
Here is screenshot of navbar current condition:
Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.
I would like to align some how that logo trough flex, is there a way to do that with flex?
Check the code:
HTML/jsx:
<div className="container">
<header className="header">
<nav className="user-nav">
<div className="user-nav-item">
<Link href="/">
<a className="user-nav-item-link">Overview</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/feed">
<a className="user-nav-item-link">Feed</a>
</Link>
</div>
<h3 className="logo">Logo</h3>
</nav>
<div className="user-nav-icon">
<div className="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div className="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
CSS:
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
.header {
display: flex;
align-items: center;
height: 5rem;
color: #fff;
background-color: black;
.user-nav {
width: 100%;
display: flex;
align-items: center;
&-item {
width: 5.5rem;
padding: 1.5rem;
cursor: pointer;
}
&-item-link {
text-decoration: none;
color: white;
}
.logo {
margin-left: 27%;
}
&-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
& > * {
padding: 0 0.8rem;
cursor: pointer;
}
&-icon-notification {
color: red;
}
}
}
}
}
Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:
* {
box-sizing: border-box;
}
.parent{
width: 100%;
min-height: 80px;
background-color: yellow;
display: relative;
}
.nav-menu,
.icons{
display: inline-block;
}
.icons{
float: right;
margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
width: 150px;
height: 40px;
position: absolute;
left: 50%;
background-color: green;
transform: translateX(-50%);
}
<div class="parent">
<div class="nav-menu"> Your Menu</div>
<div class="logo"></div>
<div class="icons">Your Icons</div>
</div>
You can simply get the logo out you nav so that all three, logo, nav and icons become flex items and justify header's content with space-between. Below is the simplified code.
P.S. - Share the rendered code as your implementation in future and not JSX/SASS
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
}
.container .header {
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
color: #fff;
background-color: black;
}
.container .header .user-nav {
display: flex;
align-items: center;
}
.container .header .user-nav-item {
padding: 1.5rem;
cursor: pointer;
}
.container .header .user-nav-item-link {
text-decoration: none;
color: white;
}
.container .header .user-nav-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
}
.container .header .user-nav-icon > * {
padding: 0 0.8rem;
cursor: pointer;
}
.container .header .user-nav-icon-icon-notification {
color: red;
}
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<a class="user-nav-item-link">Overview</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Search</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Feed</a>
</div>
</nav>
<h3 class="logo">Logo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
Bell
</div>
<div class="user-nav-icon-box">
Settings
</div>
</div>
</header>
</div>
Here is an answer using display: flex; Flexbox is best & elegant to align items to mid of the page without cheesy computations by Margin, Transform,...
<html>
<head>
<style>
*, .container {
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
color: ivory;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 13px;
}
.header {
display: flex;
align-items: center;
padding: 10px;
background-color: gray;
}
.user-nav {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
.user-nav-item {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
}
.user-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<Link href="/">
<a class="user-nav-item-link">Overview</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/search">
<a class="user-nav-item-link">Search</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/feed">
<a class="user-nav-item-link">Feed</a>
</Link>
</div>
</nav>
<h3 class="logo">Logoooooooooooooooooooooo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div class="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
</body>
</html>
I wrote a simple code to have two boxes center aligned with different dimensions
and now I would like to add a third one based on the dimensions of the second one (grey) and to start outside of the second one.
The second one (grey) is the core and the third one that I want to be the coil around the core but with it's own dimensions.
That's why I want to be based on the dimensions of second.
Please could you help me to make it?
Thank you very much in advance!
Kind Regards,
George
Here is the code:
<html>
<head>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius:20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius:5px
}
</style>
</head>
<div id="container">
<div class="box1">
<div class="box2">
<div></div>
</div>
</div>
</div><!-- end #container -->
</html>
So considering the grey as the core and the red border around it as the coil. Is this how you wanted it to be done?
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius: 20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius: 5px;
position: relative;
}
.box2:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
border-radius: 5px;
}
<div id="container">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<!-- end #container -->