I'm having trouble with a simple layout for a navigation bar. The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
http://jsfiddle.net/digorydoo/j2v5m7gr/
I just can't figure out what's wrong with my layout.
HTML:
<div class="outer-frame">
<div class="nav-frame">
<div class="nav-cell">
<div class="nav-icon">🏠</div>
</div>
<div class="nav-cell">
<div class="nav-icon">💊</div>
</div>
<div class="nav-cell">
<div class="nav-icon">🎫</div>
</div>
</div>
</div>
CSS:
/* box around everything */
.outer-frame {
position: relative;
/* origin for absolute pos'ed children */
margin-left: auto;
margin-right: auto;
margin-bottom: 12pt;
width: 200px;
height: 190px;
border: 1px solid #f0f0f0;
background-color: #fafafa;
}
/* grey area to the left */
.nav-frame {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
width: 36px;
height: 100%;
background-color: grey;
}
/* the outer container of the icon */
.nav-cell {
position: relative;
display: block;
box-sizing: border-box;
width: 36px;
height: 38px;
background-color: yellow;
margin-top: 4px;
}
/* the inner container of the icon */
.nav-icon {
display: block;
background-color: white;
border: 1px solid orange;
width: 8px;
height: 8px;
margin:auto;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
This is one of the ways to center it vertically and horizontally, you need to position it absolutely, set the margin to auto and all four sides to zero (or an offset, but you need to define it):
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
See it here: http://jsfiddle.net/j2v5m7gr/7/
The icons of the bar are supposed to be both horizontally and vertically centred in their cell.
Here you go: http://jsfiddle.net/j2v5m7gr/10/ The same approach from above.
Related
I need the navigation bar on my website to stay horizontally centered on the page while having the position: fixed; property and I need the width to always be the same as the content inside the div
Is there a way to accomplish this?
Here is the CSS I have now:
.tab {
overflow: hidden;
background-color: #505050;
padding: 0;
width: fit-content;
border-radius: 15px;
position: fixed;
top: 0;
margin-left: 280px;
z-index: 10;
}
Here is my website if you need that to see what I need.
Remove margin-left in code.
Set transform and left for horizontally center.
Modify width to 100%.
.tab {
overflow: hidden;
background-color: #505050;
padding: 0;
width: 100%;
border-radius: 15px;
position: fixed;
top: 0;
z-index: 10;
transform: translateX(-50%);
left: 50%;
}
Add a wrapper around your tab
<div class="tabwrapper">
<div class="tab">
</div>
</div>
<style>
.tabwrapper {
position: fixed;
width: 100%;
text-align: center;
top: 0;
}
.tab {
margin: 0 auto;
display: inline-block;
}
</style>
Another option is to add a flexbox wrapper around your element and fix its position:
.tab-wrapper {
display: flex;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
border: solid red 1px;
overflow: hidden;
z-index: 10;
}
.tab {
padding: 0;
border: solid blue 1px;
}
<div class='tab-wrapper'>
<div class='tab'>
Content
</div>
</div>
Borders added for visual clarity.
I'm building a fullscreen modal, and I'm trying to center the content vertically when it is smaller than the screen, and to start at the top and allow scroll, when the hight is larger than the hight of the container. I'm trying to use position:fixed to position the container on the screen, and display:flex; align-items:center; to center the inner div. When the container is shorter than the inner div the top part of the inner div is cut out, even when I use: overflow-y:scroll.
Here is my code:
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
margin: 50px 0;
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
here is a jsfiddle: https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR
add to .modal{flex-direction-column;} now you can remove the margin
.modal {
position: fixed;
bottom: 70px;
top: 0;
left:0;
right: 0;
display: flex;
flex-direction:column;
align-items: center;
padding: 15px;
overflow: scroll;
}
.inner-w {
width: 100%;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
<div class="modal">
<div class="inner-w">
hello world
<div class="long-box">
</div>
</div>
</div>
#godfather had an excellent suggestion to change the direction of the flex container from row to column with .modal{flex-direction-column;}. It better describes our layout, and the width and margin property aren't needed any more. However it is not enough. overflow: scroll (or "auto") property isn't inherited, and should be placed on the actual element that overflows - the .inner-w class.
Here is how the css should look:
.modal {
position: fixed;
flex-direction:column;
bottom: 70px; // kept for a button
top: 0;
left:0;
right: 0;
display: flex;
padding: 15px;
justify-content: center;
}
.inner-w {
overflow: auto;
}
.long-box {
height: 400px;
width: 100%;
border: 1px solid brown;
}
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 6 years ago.
I have a problem I can't solve. i m trying to center this black box inside red box which has absolute position. I tried making the black box to relative position but i feel like i am missing something.
Ultimately, i m trying to make the top header.
here is an image header-image.jpg
Help?
body.esc-layout {
min-width: 960px;
margin: 0 auto;
}
.promo-bar {
display: block;
}
.promo-bar .customer-care-wrapper {
float: left;
max-width: 50%;
}
.promo-bar .customer-care {
font-size: 11px;
color: #000;
margin-left: 15px;
display: block;
}
.promo-bar {
width: 100%;
min-height: 32px;
position: relative;
height: auto;
overflow: visible;
z-index: 5;
background-color: #EEE;
overflow: hidden;
}
.promo-bar .service-message-wrapper {
padding-top: 2px;
max-width: 50%;
margin: 0 auto;
position: relative;
}
.service-message-wrapper .service-banner{
position: absolute;
left: 0px;
right: 0px;
text-align: center;
background: red;
}
.caption-wrapper{
position: relative;
background: black;
}
.service-message-wrapper .captions{
font-family: inherit;
font-style: italic;
font-size: 14px;
color: white;
}
<body class="esc-layout">
<div class="promo-bar">
<div class="customer-care-wrapper promo-block">
<div class="customer-care" style="padding-top:10px; padding-bottoms:12px;">
" Contact us 24/7: "
</div>
</div>
<div class="service-message-wrapper promo-block" style="height: 28px;">
<div class="service-banner service-message-1" style="margin-top: 0px;">
<div class="caption-wrapper">
<p class="captions">
<span> Same-day delivery to New York </span>
</p>
</div>
</div>
</div>
</div>
</body>
You can use position: absolute with a combination of top and transform.
The trick is that in top: 50%, the 50% refers to the parent height. In transform, 50% refers to the element's own height.
.outer {
height: 50px;
width: 50%;
position: absolute;
top: 0;
right: 0;
background: red;
}
.inner {
position: absolute;
left: 0;
/* make the top edge of .inner appear in the vertical center of .outer */
top: 50%;
/* move .inner up by half of its height so that its middle is in the middle of .outer */
transform: translateY(-50%);
height: 20px;
width: 100%;
background: black;
}
<div class="outer">
<div class="inner"></div>
</div>
More info: http://howtocenterincss.com/
Centering inside an absolute element, the inner element needs to be absolute give a width and height.
.red-box{
background-color:red;
width:400px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
.black-box{
background-color:black;
width:200px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
<div class="red-box">
<div class="black-box"> </div>
</div>
working sample (click run button)
For center div it is very easy to use flex box.
div.outer {
align-items: center;
background: red none repeat scroll 0 0;
display: flex;
height: 50px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
div.inner {
background: black none repeat scroll 0 0;
height: 20px;
left: 0;
width: 100%;
}
<html><head>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Do not forget using webkit for safari and chrome and in your case I think it's better to set margin:0 for <p> for better control
p.captions{margin:0;}
I'm designing my layout for my Pong game and am having trouble with aligning the elements in the bottom of my page so they're all on the same horizontal line. Underneath the playing arena I have my scoreboard, with the instructions to the left, and a Play button to the right, which should all be on the same line next to each other.
The instructions and scoreboard are fine, but for some reason the Play button is place on the bottom right of the inline display, instead of the middle.
Here is a JSfiddle
and my html:
<body>
<div id="back">
<div id="arena">
<div id="paddleL" class="paddle"><div id="hitZoneL"></div></div>
<div id="paddleR" class="paddle"><div id="hitZoneR"></div></div>
<div id="ball"></div>
</div>
<div id="instructions">
<h3> Instructions: </h3>
<h3> Space to launch </h3>
<h3> Buttons: up/down </h3>
</div>
<div id="scoreboard">
<h1> Score </h1>
<h2 id="leftScore"> 0 </h2>
<h2 id="rightScore"> 0 </h2>
</div>
<div id="loginDiv">
<button id="loginButton" onclick="login()">Play!</button>
</div>
</div>
<script src="./app.js"></script>
</body>
and the css:
body {
background-color: rgba(40, 0, 0, 0.2);
}
h2 {
display: inline;
margin-top: 0;
padding-top: 0;
}
#instructions {
position: absolute;
display: inline-block;
left: 100px;
}
#loginDiv {
position: absolute;
display: inline-block;
right: 250px;
}
#loginButton {
margin: 0;
padding: 0;
height: 50px;
width: 80px;
font-size: 30px;
}
#leftScore {
float: left;
margin-left: 10%;
}
#rightScore {
float: right;
margin-right: 10%;
}
#back {
text-align: center;
width: 100vw;
}
#arena {
width: 1200px;
height: 650px;
background-color: rgba(00, 99, 0, 0.2);
border: 2px solid black;
position: relative;
margin: 0 auto;
}
.paddle {
position: absolute;
height: 90px;
width: 20px;
background-color: black;
}
#paddleR {
right: 10px;
border-bottom-right-radius: 40%;
border-top-right-radius: 40%;
}
#paddleL {
left: 10px;
border-bottom-left-radius: 40%;
border-top-left-radius: 40%;
}
#scoreboard {
border: 4px solid black;
border-top: 1px solid black;
width: 400px;
margin: 0 auto;
background-color: rgba(00, 0, 99, 0.2);
overflow: hidden;
}
As you can see if you zoom out, the play button is in this position:
Is there any way to make it go more towards where the black box is in this picture, so its vertically aligned with the middle of the scoreboard?
You're #scoreboard also needs to be an inline-block.
So position:absolute needs to be in relationship to something; right now, it's aligning things in relationship to the body, but you'd probably be better off putting a wrapper div around #instructions #scoreboard and #loginDiv and positioning against that. Once you've created this wrapper div (I've named it #footer in my CodePen, you'll want to update your CSS with the following :
#footer {
/* This assures that the absolutely positioned child elements will base their positioning off of this div */
position:relative;
/* Styles to match #arena */
margin:0 auto;
width: 1200px;
}
#instructions {
position: absolute;
/* Position in relationship to #footer */
top:0;
left: 100px;
}
#loginDiv {
position: absolute;
/* Position in relationship to #footer */
top:40px;
right: 150px;
}
I'm trying to create a progress bar and i have a problem aligning div inside a div.
css:
.outer {
width: 20px;
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display:inline-block;
}
.inner {
width: 100%;
overflow: hidden;
position: absolute;
border-top-width: 0;
background-image: url('/images/progressBar2Red.png');
background-size: 20px;
bottom: 0;
height: 0%;
display:inline-block;
}
.progress{
display: inline-block;
align-items:center;
}
html:
<div class="progress">
<label class="progNum">20</label><br />
<div class="outer">
<div class="inner"></div>
</div>
</div>
For some reason the inner div is not exactly in the middle of the outer div. This is how it looks:
How can i put the inner div exactly in the middle of the outer div?
You made this .inner element of position: absolute. Just add left: 0; and right: 0; to the .inner CSS rules.
Divs are of 100% width by default, never set a div to a 100% width unless you absolutely need it... for some reason.
EDIT
Ok I actually do not understand what DOES NOT work for you. Check this JSFiddle. I think the problem is your background.
Give the inner margin: 0 auto;
JSfiddle Demo
HTML
<div class="progress">
<label class="progNum">20</label>
<div class="outer">
<div class="inner"></div>
</div>
</div>
CSS
.outer {
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.inner {
width: 100%;
position: absolute;
border-top-width: 0;
background-color: red;
bottom: 0;
width: 100%;
height:20px; /* or anything else you want */
border-radius: 4px;
}
.progress{
display: inline-block;
width: 20px; /* sets width of the whole bar - everything else can be 100% */
}
.progNum {
text-align: center;
display: block;
}