This is my code and tried everything I could think of to place my image in the top middle and links on the top right corner.
Whatever I try doesn't align them in the same div and makes things wacky.
Here is my code:
#header img{
display: block;
margin: 0 auto;
width: 150px;
height: 90px;
}
.login a{
float: right;
text-decoration: none;
font-size: 18px;
padding: 10px;
}
<div id="header">
<img src="img/raystratos.png"/>
<div class="login">
Sign Up
Log In
Shopping Cart
</div>
</div>
Try absolute positioning:
#header { position: relative; }
.login { position: absolute; top: 0; right: 0;}
You can use flex to do this and also if you want to divide this row into 3 equal width columns you add another div inside the container and then add flex:1 property to each child element inside the #header.
#header {
display: flex;
justify-content: space-between;
}
#header img{
display: block;
margin: 0 auto;
width: 150px;
height: 90px;
flex: 1;
}
.equalFlex {
flex: 1;
}
.login a{
text-decoration: none;
font-size: 18px;
padding: 10px;
flex: 1;
}
.login{
flex: 1;
}
<div id="header">
<div class="equalFlex"></div>
<img src="img/raystratos.png"/>
<div class="login">
Sign Up
Log In
Shopping Cart
</div>
</div>
Related
I'm trying to align all navigation links, besides the logo, to the right side of the container/navigation. I want to keep 1rem margin on both sides so that the content has some space to breathe.
I've tried using the code below but nothing on the page changes:
.menu:not(:first-child){
text-align: right;
}
<body>
<div class="body-wrap">
<header class="header">
<nav role="navigation">
<ul class="menu">
<li class="home-link"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></li>
<li>About</li>
<li>Writing</li>
<li>Speaking</li>
<li>Projects</li>
</ul>
</nav>
</header>
</div>
</body>
* { box-sizing: inherit; margin: 0; padding: 0; }
body {
position: relative;
line-height: 1.5em;
min-width: 320px;
margin: 0 auto;
color: #222222;
border: 30px solid #ffffff;
background-color: #f8f7f3;
}
.body-wrap {
display: flex;
min-height: 100vh;
display: box;
}
.header {
width: 100%;
max-width: 960px;
margin-right: 1rem;
margin-left: 1rem;
}
.menu {
display: flex;
position: absolute;
top: -0.83rem;
width: 100%;
max-width: 960px;
}
.menu:not(:first-child){
text-align: right;
}
li {
flex-grow: 1;
position: relative;
margin-right: 1em;
display: inline-block;
}
I expect all the nav links to align to the right when using the :not(:first-child) selector.
This:
.menu:not(:first-child)
selects class menu items that aren't a first child.
What you want is:
.menu :not(:first-child)
which selects non-first-child elements within a .menu class.
Notice the space.
Or better yet, make it more obvious what you really mean:
.menu li:not(:first-child)
You might just have to change to this if all you are looking to do is align the text to the right.
.menu li:not(:first-child){
text-align: right;
}
There is a block 225px. Inside you insert a picture large size (850px). And she goes outside.
It looks like this:
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
}
.single-slide img {
width: auto;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<div>to place the center of the image</div>
</div>
</div>
</div>
Using slick slider. I want to add dots to control the slider.
When I add the dots they are placed in the middle of the block. It's okay, I understand. But I want to place them in the center of the picture. How to do it?
UPD: The image goes beyond the block, that's right! And I need to do to the dots were at the center of the image, not the block
I see that your dots are in the center of the window.
To do this, your dots list must be inside a container with the image's width.
I think you should enlarge your slider or limit image's width with a max-width: 100%;
if you want to need image in box then change
.single-slide img { width: auto;}
to
.single-slide img { max-width: 100%;}
Updated: The inherit keyword specifies that a property should inherit its value from its parent element [ Source ]. and image can't be a parent element. see this example.
Here is a solution on based on inherit and position on your latest update.
See the html section I have added a class "img-holder" on div which hold the img and add a class "div_center" on div which contain text's.
img inherit width from its parent div class "img-holder". "img-holder" and "div_center" inherit width from parent div class slider.
N.B: if you set the img width auto text will always center of the div class slider.
.content {
display: inline-block;
}
.column {
float: right;
width: 225px;
}
.slider {
border: 1px solid #000;
width: 220px;
padding: 5px;
position:relative;
}
.img-holder {
width: inherit;
}
.img-holder img {
width: inherit;/*width auto default value. The browser calculates the width*/
}
.div_center {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div class="img-holder">
<img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' />
</div><!--./ img-holder -->
<div class="div_center">
to place the center of the image
</div><!--end of txt_center -->
</div><!--./ slider single-slide-->
</div><!--./ column -->
</div><!--./ content -->
Previous: Position absolute for slick-dots class but you dont set any relative position for that. so you need to add position relative to your slide div.
And make the image responsive. I have added responsive property for your image on css section and added border on li for clear view.
.content {display: inline-block;}
.column {float:right; width:225px;}
.slider {
border: 1px solid;
width: 220px;
padding: 5px;
position: relative;
}
.single-slide img {
max-width:100%;
display:block;
height:auto;
margin:0 auto;
}
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
top:50%;
left:0;
right:0;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
border:2px solid red;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
right: 0;
bottom: 0;
left: 0;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 12px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
<div class="content">
<div class="column">
<div class="slider single-slide">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
<ul class="slick-dots">
<li class="active"><button></button></li>
<li><button></button></li>
<li><button></button></li>
</ul>
</div>
</div>
</div>
I have created a header with one div as a main menu of website and added into it some divs as main menu items. My question is: how to center vertically and horizontally inner divs which are headers of main menu placed in main menu items? I have tried many solutions like transformations and flex style of display but unfortunately nothing works. Why there is not something like Horizontal / VerticalAlignment from XAML in CSS?
body {
margin: 0;
}
header {
height: 50px;
background-color: lightgrey;
}
#main-menu {
margin: 0 auto;
width: 1000px;
height: inherit;
}
.main-menu-item {
float: left;
width: 100px;
height: inherit;
}
.main-menu-header {
display: block;
height: inherit;
}
.main-submenu {
width: inherit;
word-wrap: break-word;
/*display: none;*/
list-style: none;
margin-left: -40px;
margin-top: 0px;
}
<body>
<header>
<div id="main-menu">
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(0, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(0, 'none')">
<div class="main-menu-header">MenuItem1</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(1, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(1, 'none')">
<div class="main-menu-header">MenuItem2</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
<div class="main-menu-item" onmouseover="ChangeDisplayOfSelectedSubmenu(2, 'block')" onmouseout="ChangeDisplayOfSelectedSubmenu(2, 'none')">
<div class="main-menu-header">MenuItem3</div>
<ul class="main-submenu">
<li>SubMenuItem1</li>
<li>SubMenuItem2</li>
<li>SubMenuItem3</li>
</ul>
</div>
</div>
</header>
Use the padding top and padding bottom simply?
Try the CSS line-height Property Follor this : https://www.w3schools.com/cssref/pr_dim_line-height.asp
You can use a css old trick, use this:
header{
height:50px;
display:block;
}
#main-menu{
position:aboslute;
top:50px;
margin-top:-25px;
}
Change your CSS to the following -
body {
margin: 0;
}
header {
height: 50px;
background-color: lightgrey;
}
#main-menu {
height: inherit;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.main-menu-item {
float: left;
width: 100px;
/* height: 100%; */
text-align: center;
}
.main-menu-header {
display: block;
height: inherit;
}
.main-submenu {
width: inherit;
word-wrap: break-word;
/*display: none;*/
list-style: none;
margin-left: -40px;
margin-top: 0px;
}
Using flexbox property here to achieve the desired effect
I need to present a header menu with 3 elements:
one is left aligned
one is centered
one is right aligned
I would like a gray background for this menu.
The problem: if I have links in my left or right elements and it is not clickable because of the centered element.
How to prevent this problem? or another way of having this kind of menu?
Any idea is highly appreciated.
jsFiddle: http://jsfiddle.net/sxmf0Lve/
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
Updated fiddle: http://jsfiddle.net/7mo7hyza/
Your z-index idea is good, but you didn't perform it well: z-index only works between elements that are both not in the normal workflow of the document (they have position: absolute/relative/..)
So you simply have to position your left/right containers with position: absolute instead of float, and make the big container relative so that you can position the other containers relatively to that one.
.headerContainer {
position: relative;
} .headerTitle {
z-index: 0;
} .headerLeft {
position: absolute;
left: 0;
z-index: 1;
} .headerRight {
position: absolute;
right: 0;
z-index: 1;
}
Make the left and right position relative and give them a higher z-index.
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft,
.headerRight {
position: relative;
z-index: 2;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
Try to avoid using float-ing elements or messing with the z-index. There are two more appropriate methods for what you're trying to achieve:
Method 1: CSS box model
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
display: flex;
flex-wrap: nowrap;
}
.headerLeft,
.headerTitle,
.headerRight {
display: inline-block;
}
.headerLeft,a
.headerRight {
flex-grow: 0;
}
.headerTitle {
flex-grow: 1;
text-align: center;
font-size: x-large;
font-weight: bold;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
See JsFiddle
Method 2: Table layout
.row {
display: table-row;
width: 100%;
background-color: #eee;
}
.cell {
display: table-cell;
}
.middle {
width: 100%;
text-align: center;
}
<div class="headerContainer row">
<div class="cell">
Left
</div>
<div class="cell middle">
<h1>Middle</h1>
</div>
<div class="cell">
Right
</div>
</div>
See JsFiddle
I need to center html content inside a div class="partners" (top div with 2 images). As you can see from the image below (it floats left instead of center of the div):
This is my html code:
<div id="partners">
<div class="wrap clearfix">
<h2>Partnertnerzy serwisu:</h2>
<ul>
<li><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></li>
<li></li>
</ul>
<a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
</div>
</div>
Image:
CSS:
#partners, #top {
position: relative;
z-index: 100;
}
#partners {
margin: 12px 0 3px;
text-align: center;
}
.clearfix:after, .row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#partners .wrap {
width: 655px;
}
.wrap {
margin: 0 auto;
position: relative;
width: 990px;
}
#partners h2 {
color: #A6A5A5;
float: left;
font-weight: normal;
margin: 2px 15px 0 0;
}
#partners ul {
float: left;
}
ul {
list-style-position: outside;
list-style-type: none;
}
To center a div, set it's width to some value and add margin: auto.
#partners .wrap {
width: 655px;
margin: auto;
}
EDIT, you want to center the div contents, not the div itself. You need to change display property of h2, ul and li to inline, and remove the float: left.
#partners li, ul, h2 {
display: inline;
float: none;
}
Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.
There are many ways to center any element. I listed some
Set it's width to some value and add margin: 0 auto.
.partners {
width: 80%;
margin: 0 auto;
}
Split into 3 column layout
.partners {
width: 80%;
margin-left: 10%;
}
Use bootstrap layout
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">Your Content / Image here</div>
</div>
You just need
.parent-div { text-align: center }
Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:
Depending on the axis of the flexbox, you will need to align or justify items, read more at MDN
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}
in parent div
parentDiv: {
display:flex;
height:100%;
width:100%;
justify-content:center;
align-items:center;
}
You just do CSS changes for parent div
.parent-div {
text-align: center;
display: block;
}
The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.
To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.
To achieve that you have to remove the floating in the content elements and set the display property of the block levels elements to inline:
#partners .wrap {
display: inline;
}
.wrap { margin: 0 auto; position: relative;}
#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}
#partners ul {
display: inline;
}
#partners li {display: inline}
ul { list-style-position: outside; list-style-type: none; }
do like this :
child{
position:absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
After 2022.
Here is your class to center content both vertically and horizontally.
.center {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}