flexbox should make things a lot simpler it seems, but I can't seem to get the text links and images in this menu to align vertically. The text links and images are centered vertically and horizontally instead. What's missing? I'm probably also over doing it as if I were using tables and vertical-align. I want everything to align to the bottom.
* {
padding: 0;
margin: 0;
}
header > div {
display: flex;
position: relative;
}
header > div > a {
border: solid 1px #000;
float: left;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
header > div > ul {
border: solid 1px #000;
float: left;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
header .menu li {
display: inline-block;
float: left;
height: 279px;
line-height: 279px;
}
header .menu li a {
display: block;
align-self: flex-end;
height: 279px;
line-height: 279px;
}
<header>
<div>
<a href="#">
<img src="http://eu2013.ie/media/eupresidency/content/imagegalleryitems/twitter-bird-blue-on-white-small.png" />
</a>
<ul class="menu">
<li>A</li>
<li>B</li>
<li style="background: url('http://printready.co/wp-content/uploads/2012/08/facebook-like-icon-300x279.png') no-repeat; width: 300px; height: 279px;"></li>
</ul>
</div>
</header>
https://jsfiddle.net/rpbwdvxe/1/
Set flex on header > div's children, and align-self on its grandchildren:
header > div {
display: flex;
}
header > div > * {
display: flex;
}
header > div > * > * {
align-self: flex-end;
}
Working Fiddle
Try this
header > div > a {
border: solid 1px #000;
float: left;
height: 110px;
line-height: 110px;
display: table-cell;
vertical-align: middle;
}
Related
HTML
<div id="dashboard">
<div id="Sidebar">
<div id="User-Icon"></div>
<ul>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
</ul>
</div>
<div id="Dashboard">
</div>
<div id="UserFeed">
</div>
</div>
CSS
* {
Font-Family: Arial;
Margin: 0;
Padding: 0;
}
#dashboard {
display: flex;
height: 100vh;
width: 100vw;
}
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-self: flex-end;
}
#Dashboard {
background-color: #999999;
height: 100%;
width: 50%;
}
#UserFeed {
background-color: #D9D5D6;
height: 100%;
width: 30%;
}
#User-Icon {
width: 150px;
height: 150px;
background-color: white;
border-radius: 50px;
margin-top: 50px;
}
ul {
}
li {
list-style: none;
margin-top: 50px;
}
My goal here is to move the ul under my User-Icon in a centered matter, if anyone could help me it would be greatly appreciated!
I tried using things like Clear: left; for the ul, Float: bottom; but I just couldn’t get anything to work. I would like to know more about this so if you can, I would like the explanations to be a bit detailed for me
just add flex-direction and align items
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
align-items:center
}
You tried with z-index ?
try this
ul {
z-index: -1;
}
Change this within sidebar
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
align-items: flex-end;
flex-direction: column;
}
It will keep the formatting you were trying to achieve.
I think you are looking for something like this
If this is what you are looking for please use flex-flow: column;align-items: center; for the parent Element. display flex is a little bit complex. you should read the doc carefully. Here is the updated CSS for you.
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
flex-flow: column;
align-items: center;
}
ul {
width: 100%;
margin-top: 10px;
}
li {
list-style: none;
padding: 12px;
margin-bottom: 2px;
}
I have <ul> list and inside <li> i have link <a href="...">
I want the <li> not to be influenced by the content and have fixed size.
My CSS
ul.files {
display: inline-block;
padding: 0;
margin: 0 auto;
}
ul.files li {
display: inline;
}
ul.files li a {
color: black;
float: left;
padding: 8px 15px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 3px;
background-color: #ffffff;
}
My HTML
<ul class="files">
<li>
<a id="some_id" href="http">123</a>
</li>
</ul>
To be able to set fixed width and height to <li> you need to change display: inline; to inline-block
ul.files li {
display: inline-block;
width: 150px;
height: 150px;
}
To center text
To center content of li you can use display: inline-flex
ul.files li {
display: inline-flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
}
I am using an inline list as a nav menu, and I would like the hyperlink/list item to take up the full height of the container with the label vertically positioned in the center of the container. Here is what I have:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
Any other suggestions you have with any of this is greatly appreciated.
You need to add both height and line-height to the links, and also make sure they are either display: block or display: inline-block. Note that inline-block would be preferred:
#top-nav-container li a {
height: 50px;
line-height: 50px;
display: inline-block;
}
Note that on small screens, the Stuff Here... div would get cut off due to having a current width of 250px. Simply turn this down to say 50px (or however wide your container would actually be):
#top-nav-container .nav-right {
width: 50px;
}
I've created a fiddle showing this here.
Hope this helps! :)
You need to modify your CSS a little, see the following snippet:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {
/* all below rules were added*/
position: absolute;
line-height: 50px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
#top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
/* all below rules were added*/
height: 50px;
line-height: 50px;
display: inline-block;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
How can i center image in any div in HTML & CSS ?
I have a nav bar that uses images as links for other pages, the nav bar is multiple divs each has an image and anther div contains a words, how can I center this img in the div
The CSS:
#Nav
{
height: 150px;
margin-top: 50px;
}
#Nav ul
{
list-style-type: none;
padding: 50px;
padding-top: 0px;
width: 100%;
}
#Nav li
{
float: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
margin: 30px;
}
#Nav a
{
display: inline-block;
padding: 5px;
width: 70px;
height: 100px;
color: black;
text-decoration: none;
}
#Nav a:hover
{
border: 2px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5);
}
#img img
{
align-self: middle;
width: 50px;
height: 50px;
}
#desc
{
margin-top: 15px;
text-align: center;
}
The html:
<li> <a target="_blank" href="#">
<div id="img"> <img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories">
<div id="desc"> Accessories </div>
</div>
</a> </li>
You need to change your CSS for image like below:-
#img img
{
display: block;
margin: 0 auto;
}
You can see Many Demos Here-
Note that align-self is for elements inside a flexbox container which is not your case, you can try with text-align: center; on img.
Or if you wish to go full flexbox, set the img container to:
.containerClass {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
With this setup align-self on the img is not need since justify-content on it's container will do.
Flexbox to the rescue:
.parent {
width:200px; height:200px;
border:2px solid #000;
display: flex; /* Make it flex */
flex-direction: column; /* wrap children elements to columns */
align-items: center; /* Center children horizontally */
justify-content: center; /* Center children vertically */
}
<div class="parent ">
<img src="http://placehold.it/100x100/cf5">
<p>Green-ish</p>
</div>
<div class="parent ">
<img src="http://placehold.it/100x100/5fc">
<p>Blue-ish</p>
</div>
align-self: center; is valid, align-self: middle; is not valid.
However, you can probably achieve what you're wanting with text-align: center;. Despite it being an image, you can still center using text-align as images are, by default, inline elements just like text.
#img img
{
align-self: center;
width: 50px;
height: 50px;
}
OR
#img img
{
text-align: center;
width: 50px;
height: 50px;
}
First you have to change the nature of div to table then make its align to center like this
#img img
{
display:table;
align: center;
width: 50px;
height: 50px;
}
I have a div that's inside a float:left div and it doesn't want to vertically align. I thought I could completely fill the floated div with the inner div and set that one to display: table-cell, but it doesn't seem to want to both FILL the div and allow this display?
JSFiddle Here
<div id="tabs-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="">
<div id="DivToCenter">
<div id="ButtonContainer">
<ul>
<li><div class="TemplateButton">Report an Issue</div></li>
<li><div class="TemplateButton">Report an Issue</div></li>
<li><div class="TemplateButton">Report an Issue</div></li>
<li><div class="TemplateButton">Report an Issue</div></li>
</ul>
</div>
</div>
</div>
Styling:
#tabs-3 { /* Tab Content Panel (Right Panel)*/
float: left;
min-height: 300px; /* How tall is our tab box, minimum?*/
text-align: center;
background-color: pink;
}
#DivToCenter {
width: 100%;
height: 100%;
background: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#ButtonContainer {
width: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 10px;
background: green;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#ButtonContainer > ul {
padding: 0;
margin: 0;
display: inline-block;
}
#ButtonContainer > ul > li {
display: inline-block; /*Puts the buttons in a line*/
}
.TemplateButton {
padding-left: 5px;
padding-right: 5px;
}
.ui-tabs-panel.ui-widget-content .TemplateButton > a {
/* SHAPE */
width: 119px;
height: 119px;
padding: 15px;
margin-left: 3px;
margin-right: 3px;
border: 1px solid white;
border-radius: 15px;
-moz-border-radius: 15px;
/* ALIGNMENT */
display: table-cell;
vertical-align: middle;
text-align: center;
/* STYLING */
font-weight: bold;
font-size: 1.25em;
color: white;
background-color: #0c428f;
}
.ui-tabs-panel.ui-widget-content .TemplateButton > a:hover {
background-color: #6795bb;
}
Just add display: table; to #tabs-3
Updated Demo