I'd like to be able to just justify this text..
For the life of me I cannot get it to work.
HTML:
<div id="main-content-left-container">
<ul id="left-bullets">
<li>I want all/li>
<li>of this text</li>
<li>justified to the left-bullets 70% width size</li>
</ul>
<img > //not important here
</div>
CSS:
#main-content-left-container {
width: 450px;
position: relative;
float: left;
margin-left: 5px;
}
#left-bullets {
position: relative;
width: 70%;
margin: 0 15px 0 auto;
list-style-type: disc;
font-size: 12pt;
text-align: justify;
}
I have tried many variations and combinations of text-align in the CSS. Display: Block, etc. Yet I still cannot get this text to justify.
I found this piece of code that could do it:
#element:after {
content: "";
display: inline-block;
width: 100%;
}
This is not supported by some versions of IE though.
Fiddle: http://jsfiddle.net/bortao/LtKeK/
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;
}
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 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.
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )
I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: block;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
Is there really no CSS property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.
According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).
All you need to do is:
display: flex;
align-items: center;
See this fiddle.
You can also try
a {
height:100px;
line-height:100px;
}
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;
}
display: grid; place-content: center;
no need margin.
li a {
width: 300px;
height: 100px;
display: grid;
place-content: center;
background: red;
}
<ul>
<li>I would like this text centered vertically</li>
</ul>
You can try the display:inline-block and :after.Like this:
HTML
<ul>
<li>I would like this text centered vertically</li>
</ul>
CSS
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}
Please view the demo.
Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/:
li {
background: red;
text-align:center;
}
li a {
padding: 4em 0;
display: block;
}
You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:
.menu {
background-color: lightgrey;
height: 30px; /* calc(16px + 12px * 2) */
}
.menu-container {
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}
.menu-item {
list-style-type: none;
display: inline-table;
height: 100%;
}
.menu-item a {
display: table-cell;
vertical-align: middle;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
color: initial;
}
.text-upper {
text-transform: uppercase;
}
.text-bold {
font-weight: bold;
}
<header>
<nav class="menu">
<ul class="menu-container">
<li class="menu-item text-upper text-bold">StackOverflow</li>
<li class="menu-item">Getting started</li>
<li class="menu-item">Tags</li>
</ul>
</nav>
</header>
It works by setting display: inline-table; to all the <li>, and then applying display: table-cell; and vertical-align: middle; to the children <a>. This gives us the power of <table> tag without using it.
This solution is useful if you do not know the height of your element.
The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.
Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
line one
</li>
<li>
<span style="display: inline-block; vertical-align: middle">line two dot one
<br />
line two dot two</span>
</li>
<li>
line three
</li>
</ul>
<div style="height: 200px; line-height: 200px; border-style: solid;">
<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
<br />
line two dot two</span>
</div>
</body>
</html>
As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.
with thanks to Vlad's answer for inspiration; tested & working on IE11, FF49, Opera40, Chrome53
li > a {
height: 100px;
width: 300px;
display: table-cell;
text-align: center; /* H align */
vertical-align: middle;
}
centers in all directions nicely even with text wrapping, line breaks, images, etc.
I got fancy and made a snippet
li > a {
height: 100px;
width: 300px;
display: table-cell;
/*H align*/
text-align: center;
/*V align*/
vertical-align: middle;
}
a.thin {
width: 40px;
}
a.break {
/*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
word-break: break-all;
}
/*more css so you can see this easier*/
li {
display: inline-block;
}
li > a {
padding: 10px;
margin: 30px;
background: aliceblue;
}
li > a:hover {
padding: 10px;
margin: 30px;
background: aqua;
}
<li>My menu item
</li>
<li>My menu <br> break item
</li>
<li>My menu item that is really long and unweildly
</li>
<li>Good<br>Menu<br>Item
</li>
<li>Fantastically Menu Item
</li>
<li>Fantastically Menu Item
</li>
<br>
note: if using "break-all" need to also use "<br>" or suffer the consequences
DO NOT USE THE 4th solution from top if you are using ag-grid. It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row). Problem is not with the solution or ag-grid but somehow the combination is not good.
DO NOT USE THIS SOLUTION FOR AG-GRID
li a {
width: 300px;
height: 100px;
margin: auto 0;
display: inline-block;
vertical-align: middle;
background: red;
}
li a:after {
content:"";
display: inline-block;
width: 1px solid transparent;
height: 100%;
vertical-align: middle;
}