I have a container div - this has to be absolute positioned.
Inside a have a list - this needs to be positioned at the bottom and aligned center. I am having issues with aligning it center.
Fiddle
I need a solution that will work with IE9 so no flex box. Both the container and ul must stay absolutely positioned.
<div class="container">
<ul>
<li>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</li>
<li>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</li>
<li>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</li>
<li>
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</li>
</ul>
</div>
.container{
width: 100%;
height: 100%;
background: grey;
position: absolute;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
}
li{
display: block;
width: 10%;
float: left;
padding: 0;
}
img{
max-width: 100%;
}
Am not sure why you are doing what you are doing currently, but anyways everyone has a requirement and some do it in an odd way, so here's a fix for your solution
ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
outline: 1px solid #f00;
text-align: center;
font-size: 0;
}
li{
display: inline-block;
width: 10%;
}
Demo
So here what am doing is, I removed float from li and assigned display: inline-block; so that I can align them to the center in ul.
Also note that I've used font-size: 0; on ul element so that you don't get the white space issue while using inline-block for your li elements. So if you any day plan to nest text in li then define some font size explicitly for the li elements.
A tip, never use float: left; and display: block; together, if you float: left; then display: block; isn't required anymore.
Related
This question already has answers here:
Vertical align text in block element
(10 answers)
Closed 1 year ago.
I have an anchor tag <a> and I display it under a list item tag under an unordered list (which is a navigation bar) using a grid (for a few different reasons).
This is the structure: <ul><li><a>Content</a></li><li>...</li></ul>
The ul is a grid display, with specific column widths etc. I style the list item <li> element to be 100% width, and 100% height. (to fill all of the allocated space in the grid), then I style the a tag to be 100% of the width, and 100% of the height (I need it to fill the entire container.
I also style the <a> tag with a text-align: center; which works great for the horizontal centering, but not for the vertical text centering.
So the problem that I have is that the <a> tag "Content" is aligned to the top of the container (instead of the middle) I've tried many attempts at centering the <a> tag but without success.
Note: vertical-align: middle; has no effect on this element because it has 100% of the height.
Here is an example:
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
/*display: inline-block;*/
bottom: 0;
left: 0;
width: 80%;
height: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
box-sizing: inherit;
background-color: #e4ffe4;
overflow: hidden;
width: 100%;
height: 100%;
vertical-align: middle;
}
ul.nav li a{
color: black;
/*padding: 1vw 5px 1vw 5px;*/
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
I was wondering if there is a way to keep the element's height 100% and center its text; if so I would much appreciate the help. If not I will work on a workaround for my use case.
just add this to your css :
a {
padding-top:10px;
}
use padding instead of height. I change some css code check below snippet
ul.nav{
list-style-type: none;
margin: auto;
padding: 0;
overflow: hidden;
bottom: 0;
left: 0;
width: 80%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 4px;
}
ul.nav li{
float: left;
background-color: #e4ffe4;
}
ul.nav li a{
color: black;
padding: 0.8rem 0.3rem;
text-decoration: none;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
}
ul.nav li a span.linkText{
vertical-align: middle;
}
ul.nav li:hover{
background-color: #b4ffb4;
}
<html><head></head>
<body>
<ul class="nav">
<li>
Content
</li>
<li>
Another
</li>
<li>
Final
</li>
</ul>
</body>
<html>
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;
}
How can I align all my bullets perfectly?
Expected result: Bullets line up to one another
Actual result: They move depending on how big the text is for the
JSFiddle for clarification:
https://jsfiddle.net/hk12hhp1/
Result I want (look at red line):
http://prntscr.com/grt24m (make bullets aligned just like red line is straight)
Fiddle code:
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
Note: I still want text-align to be center
An alternative solution, using pseudo-element to create the bullet, with position: absolute positioning it on the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
ul {
list-style: none;
}
li {
padding-left: 20px;
position: relative;
}
li:before {
content: '☻';
position: absolute;
left: 0;
top: 1px;
font-size: 10px;
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
Your question isn't at all clear about exactly what you mean by wanting the bullets vertically aligned on a centered list.
Having the bullets all the way to the left in a centered list is not any sort of standard typography conventions, so I think you might really be asking is for the entire left-aligned list inside the container? I've seen this asked more often than having the bullets float all the way to the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 300px;
list-style-position: inside;
}
ul {
text-align: left;
padding-left: 0; /* remove any padding to stop it throwing off the "center" */
margin: auto; /* center the ul */
display: inline-block; /* hack to make the ul only as wide as its contents */
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
To do this, you just need to change the styling for the ul, nothing else.
#center-everything{
background-color: gray;
height: 100px;
width: 300px;
}
li {
display: inline-block;
}
li:before {
content: "■"
}
span {
position: absolute;
left: 150px;
transform: translateX(-50%);
}
<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>
</ul>
</div>
I am trying to position and re-size my social icon links in the footer, however, none of the commands seem to be having an effect, especially when I try to re-size them. I've tried marking the width and height as '!important' but that had no effect either.
Here is a JSFiddle of the code: https://jsfiddle.net/yx9fzxj0/3/
HTML:
<div class="footer">
<div id="socialicons">
<ul>
<li><img src="http://i.imgur.com/PucvPiN.png"></li>
<li><img src="http://i.imgur.com/FbCckg5.png"></li>
</ul>
</div>
</div>
CSS:
.footer {
padding-bottom: 0;
background: black;
opacity: 0.75;
width: 100%;
height: 120px;
bottom: 0;
left: 0;
right: 0;
}
#socialicons {
list-style: none;
float: right;
margin-right: 50px;
list-style: none;
height: 40px;
width: 40px;
}
Thanks for the help :)
The issues you have got:
bottom, left, right - These three do not work without position: absolute. Remove them.
Remove the list-style by using none and add it for the <li> mainly.
Set the width or height alone for the <img />.
.footer {
padding-bottom: 0;
background: black;
opacity: 0.75;
width: 100%;
height: 120px;
}
#socialicons {
list-style: none;
float: right;
margin-right: 50px;
list-style: none;
height: 40px;
width: 40px;
}
#socialicons li {
list-style: none;
display: inline-block;
margin: 5px 0;
}
#socialicons li img {
width: 50px;
}
<div class="footer">
<div id="socialicons">
<ul>
<li><img src="http://i.imgur.com/PucvPiN.png"></li>
<li><img src="http://i.imgur.com/FbCckg5.png"></li>
</ul>
</div>
</div>
Here I have a nav bar set up with a centered logo. The only problem is that I can't get it to look quite right with spacing. The logo is set to 'position: absolute' 'left: 50%' and 'margin-left: -125px' so that is always in the center. Now I just need to get the text balanced around it in a more symmetrical way, but I can't seem to figure out how to do so.
Here's the HTML
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navright">HOME</li>
<li class="navright">MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li class="navleft">CONTACT</li>
<li class="navleft">ABOUT</li>
</ul>
</div>
</div><!--end header-->
And the CSS.
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
}
div ul li {
display: inline-block;
padding: 105px 70px 40px 0;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
left: 50%;
margin-left: -125px;
display: inline-block;
}
#logo {
height: 60px;
padding-top: 40px;
width: 250px;
}
You can go to the site here.
Here's what I would do, and this is just the way I would normally go about things.
I would take the padding of the li, then add the 105px padding to the top of the header (or nav). Next, add some arbitrary margin-right to each li element (say 48px), while of course setting li:last-child to margin: 0; Next take the padding-top and the height off the li#logo and change it to this:
#logo { width: 250px; position: relative; }
Finally, just use a transform to center the logo if you are going to use absolute positioning. This essentially does the same thing as the margin-left, but it is a little more flexible. So the image css should look like this:
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I used this code and it worked perfectly for me. I can make you a fiddle or something also if you are having trouble still.