This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
Related
This question already has an answer here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Closed 1 year ago.
Recently I started learning css and while I was learning about float I didn't understand how overflow:hidden; Works with the float
I tried to go to w3schools and mdn
But I still don't understand how it works
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
}
.parent div{
background-color: #eee;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
overflow: hidden; is a css property which prevent scrollbars from appearing, even if its necessary...
I will give an example using floats to show how it works,
HTML
<div class='container'>
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
/* *{
overflow:hidden;
} */
.container{
width:108vw;
height:100vh;
background:red;
}
#div1{
width: 600px;
height: 400px;
background: blue;
float: left;
}
#div2{
width: 400px;
height: 600px;
background: green;
float: right;
}
here, I purposely made the container larger than the screen size(which, obviously is 100vh, 100vw), so the scrollbars appear. Now i have two divs with floats and different colors so you can identify them. To actually see those divs, one must scroll down and towards the right;
Here is the link to the pen i made
https://codepen.io/codebyrudra/pen/XWaBOJr
Now, uncomment the
*{
overflow:hidden;
}
now you can see that the scroll bars are gone and you can no longer scroll to see those divs completely.
You can also try this property with display:flex; or display:grid;, it will yield the same result.
Hope this helped :)
overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:
(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
width: 200px;
height: 15px;
}
.parent div{
background-color: #eee;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
So I'm creating a footer for my web document and I'm trying to achieve the following i drafted in word:
Home, Legal, Location and Contact are hyperlinks as seen in many website footers, and they are evenly spaced out vertically.
I'm having issue getting them to evenly space out in my html document. I tried using "margin-top" property but the Home hyperlink would then have uneven spacing at the top.
Would appreciate some help on this.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
This would be totally even spacing implementation for your use-case :-
(Currently I had to make width and height to be 100% since you have an explicit border on them and it wouldn't look good but without border, you can just use height:100% and it should work the same )
Also you can use space-around as well for justify-content which will decrease the top and bottom margin for your links.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#wrapper {
border: 1px solid orange;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#content {
border: 1px solid black;
display: flex;
flex-direction: column;
width:100%;
height:100%;
align-items:center;
justify-content:space-evenly;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/test_style.css">
</head>
<body>
<div id="wrapper">
<div id="content">
Home
Legal
Location
Contact
</div>
</div>
</body>
</html>
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
I have a div and in the div i have placed an image. I am trying to position that div in the center of the page but am unable to. Please help me. Thanks !
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bannerimage">
<img src="images/mailer2.jpg">
</div>
</body>
You can use display: flex for your bannerimage class to center it easily. Hope this helps
.bannerimage {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: -webkit-fill-available;
}
img {
display:block;
margin: auto;
}
<body>
<div class="bannerimage">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150px;" height="150px;">
</div>
</body>
Check this code.I think this is what you want.:)
there are a lot of ways and this is in addition from https://stackoverflow.com/users/362477/iamnotsam
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
width:100px;
}
body{
height:100%;
}
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="bannerimage">
<img class="content" src="images/mailer2.jpg">
</div>
</body>
You can achieve this by using transform property. Keep in mind that the parent div should be relative
.bannerimage {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:1px solid red
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="bannerimage">
<img src="images/mailer2.jpg">
</div>
</body>
add a container with a set width, (width: 100% or display: flex)
You can set the margin property to auto to horizontally center the
element within its container.
The element will then take up the specified width, and the remaining
space will be split equally between the left and right margins:
https://www.w3schools.com/css/css_margin.asp
.container{
display:flex;
}
#bannerimage {
margin: 0 auto;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<img src="https://picsum.photos/" id="bannerimage">
</div>
</body>
You can as already written use display:flex;
but there are other ways:
* {
margin : 0;
padding : 0;
}
.bannerimage {
margin : 0 auto;
min-width : 20%;
max-width : 1000px;
text-align : center;
backgroud : #000;
}
What i´ve done is to give the .bannerimage a min- and max-width attribute,
you also could use width instead.
Edit:
Sine i don´t know the resolution of your image this was basic example
of how to use margin only to show you how to "center" the div itself.
Now that´s everbodys voting down without even thinking of this point:
here is a fiddle, with working code! OMG!
https://jsfiddle.net/kymd1jv7/
If you don´t give this class a specific width most browsers will
handle this class as it will have a width of 100%.
The "image" could als be centered with text-align : center;
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm trying to find where the white space below my blocks container is coming from. I can fix it by adding a negative margin-bottom, but I'm wondering where it is coming from in the first place. I want it to be on the very bottom border on the container div.
JSFiddle: https://jsfiddle.net/sv7eqoff/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<link rel="stylesheet" href="positioning.css">
</head>
<body>
<nav></nav>
<div id="container">
<div id="topbar"></div>
<div id="blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<footer></footer>
</body>
</html>
CSS:
body {
margin: 0px 0px;
}
nav {
height: 100px;
background-color: blue;
width: 100%;
}
#container {
border: 2px solid black;
width: 90%;
margin: 40px auto;
}
#topbar {
width: 100%;
height: 200px;
background-color: lightgray;
}
#blocks div {
width: 200px;
background-color: lightgray;
height: 200px;
display: inline-block;
margin-top: 5px;
}
footer {
height: 100px;
background-color: blue;
width: 100%;
}
It's because those DIVs are inline-block; elements, which are aligned at the baseline (like text), meaning that some whitespace below that baseline is reserved for those parts of the letters which go under the line (like in letters g, j, p etc.).
You can avoid that by using vertical-align: top on inline-block elements.