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
Related
I would like to have my navigation bar elements centered.
As of now, I have got three <li> elements inside <ul>.
Two based on images and one is text
Can anyone help me get this centered or point out why it is not working for me ?
I have ignored the JavaScript as my focus is on indentation.
<div class = "navigationBar">
<ul>
<li><button id="back" onclick="myFunction()"><img src="./img/previous.png"></button> </li>
<li><div id ="currentFileString"> <h2>2/4<h2></div></li>
<li><button id="next"><img src="./img/next.png"></button></li>
</ul>
</div>
CSS:
#header{
font-family: "Al Bayan";
}
.jumbotron{
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
}
.navigationBar{
height: 80px;
padding-bottom: 10px;
align-content: center;
margin : 0 auto;
display: inline;
text-align: center;
vertical-align: center;
}
button{
border: none;
background: none;}
ul {
display: inline;
margin: 0 auto;
/*text-align: center;*/
list-style-type: none;
padding: 10px;
text-align: center;
}
li {
display: inline-block;
text-align:center;
}
.table-striped
{
width: 60%;
}
#tableLeft{
float :left;
width: 40%;
}
#tableright{
float: right;
width: 40%;
}
The answer below. Try this
#header{
font-family: "Al Bayan";
}
.jumbotron{
padding-top: 10px;
padding-bottom: 0px;
text-align: center;
}
.navigationBar{
height: 80px;
padding-bottom: 10px;
align-content: center;
margin : 0 auto;
/*display: inline;*/
text-align: center;
vertical-align: center;
}
button {
border: none;
background: none;}
ul {
display: inline;
margin: 0 auto;
/*text-align: center;*/
list-style-type: none;
padding: 10px;
text-align: center;
}
li {
display: inline-block;
text-align:center;
}
.table-striped
{
width: 60%;
}
#tableLeft{
float :left;
width: 40%;
}
#tableright{
float: right;
width: 40%;
}
<div class = "navigationBar">
<ul>
<li><button id="back" onclick="myFunction()"><img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/prev.png" width="20"></button> </li>
<li><div id ="currentFileString"> <h2>2/4<h2></div></li>
<li><button id="next"><img src="https://cdn4.iconfinder.com/data/icons/flat-black/512/next.png" width="20"></button></li>
</ul>
</div>
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>
See Fiddle
I have an image and two sets of text (one is a "label" and one is a "ranking").
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span>20</span>
</div>
I would like to align each to be centered vertically, the label to show up next to the image, and for the ranking data to be right aligned in the container.
However, it is not aligning in the middle, and the info and ranking "columns" are being switched (the ranking shows up in the middle, and the label to the right side).
Here is my css:
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>span
{
float: right;
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}
Wrap your contents in elements and do the following:
HTML:
<div class="contentsInfo">
<div>
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
</div>
<div>
<span>20</span>
</div>
</div>
CSS:
body,
html {
padding: 0px;
margin: 0px;
}
.contentsInfo {
font-size: 0.80em;
border-bottom: 1px grey dotted;
vertical-align: middle;
display: table;
width: 100%;
}
.contentsInfo>div {
margin-left: 5px;
vertical-align: middle;
display: table-cell;
}
.contentsInfo > div:first-child {
width: 100%;
}
.contentsInfo > div:last-child {
white-space: nowrap;
}
.contentsInfo span {
font-size: 1.1em;
}
.contentsInfo img {
height: 30px;
vertical-align: middle;
margin-right: 2px 5px 2px 0px;
padding: 2px 0px;
}
Working Fiddle
You can do like following way using display:flex. I have added on class ranking to align it right side.
*{
margin:0;
}
.contentsInfo
{
font-size: 0.80em;
border-bottom: 1px grey dotted;
display: flex;
align-items: center;
}
.contentsInfo>span
{
margin-left: 5px;
display: flex;
flex: 1 1 auto;
margin-right: 5px;
}
.ranking{
justify-content: flex-end;
}
.contentsInfo span
{
font-size: 1.1em;
}
.contentsInfo img
{
height: 30px;
padding: 2px 0px;
}
<div class="contentsInfo">
<img src="http://lorempixel.com/90/30" />
<span>Here is some info</span>
<span class="ranking">20</span>
</div>
Fiddle
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
float: right;
display: table-cell;
vertical-align: middle;
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
How do i center my div[slogan] without using negative margin/top 50%?
you don't need floats when using display: table/table-cell ... this should center the .slogan div using the table-cell layout.
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
/*float: left; NOT THIS */
width: 30px;
display: table-cell; /* THIS */
}
.slogan
{
/*float: right; NOT THIS */
display: table-cell;
vertical-align: middle;
text-align: right; /* THIS */
}
<div class="headers">
<div class="logo"></div>
<div class="slogan">IIN</div>
</div>
If you are looking to middle slogan vertically then please check the fiddle https://jsfiddle.net/nileshmahaja/e6byt6zt/
CSS
.headers
{
background-color: #ff0000;
width: 100%;
overflow: hidden;
display: table;
vertical-align:middle;
}
.logo
{
height: 35px;
border: 1px solid #00ff00;
float: left;
width: 30px;
}
.slogan
{
display: table-cell;
vertical-align: middle;
text-align:right;
}
change your slogan class with this
.slogan {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
You should use 'margin: 0 auto ;' on the . If you want to align text inside the div you can just use 'text-align: center ;'.
Check this post click