.d1 {
background-color: red;
display: flex;
justify-content: center;
}
.s1 {
color: blue;
}
<div class="d1">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
I am trying to make a div where its contents are aligned in the center. I use the above code to display the text list: item1 item2 item3 one below the other, list: underlined and the item3 to have blue color but this gives so strange results:
item1 and item2 but item3 is... on top and next to list:... What's the matter and how can I fix this? Ty
You can fix this by not using flex but inline-block and a wrapper <div> instead.
.d1 {
background-color: red;
text-align: center;
}
.d2 {
display: inline-block;
text-align: left;
}
.s1 {
color: blue;
}
<div class="d1">
<div class="d2">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
</div>
You can use <li> along with <u> and add u li {list-style-type: none;} to disable list item circle.
Check this :
.d1 {
background-color: red;
display: flex;
justify-content: center;
}
.s1 {
color: blue;
}
u li {list-style-type: none;}
<div class="d1">
<u>list:
<li>item1</li>
<li>item2</li>
<li><span class="s1">item3</span></li>
</u>
</div>
You could make you usage of an unsorted list like this one here:
If you need a more specific solution let me know that!
.d1 {
background-color: red;
justify-content: center;
display: block;
text-align: center
}
.s1 {
color: blue;
}
<div class="d1">
<p>Items:</p>
<lu>
<li>item1</li>
<li>item2</li>
<li><span class="s1">item3</span></li>
</lu>
</div>
.d1 {
background-color: red;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.s1 {
color: blue;
}
<div class="d1">
<u>list:</u>
<br>item1
<br>item2
<br><span class="s1">item3</span>
</div>
Result okay?
why you used <u> tag and "display:flex". If you use display:flex then its child nodes will take the whole height and <u>list:</u>, <span class="s1">item3</span> have done that and created 3 column. besides other content are not considered as the child nodes.
You can see the link to clear the idea of flex
Related
I need to reformat predefined HTML to give me a different layout using CSS. The HTML is returned from the server as an error message and as such I'm unable to change the format.
.server-errors ul {
list-style: none;
}
.server-errors li:before {
content: "D";
font-family: "pictos";
}
<div class="server-errors">
<ul>
<li>
<label>Server error message goes here.</label>
</li>
</ul>
</div>
The requirement is to display this with removing the <li> dot and replacing it with another (pictos) character which is left and vertically aligned.
I have managed to display the character but am unable to align it vertically as a separate entity.
I need:
---------------------------------------
- Long error message goes -
- X here and it will span -
- three lines -
---------------------------------------
I get:
---------------------------------------
- X Long error message goes here and -
- will span three lines -
- -
---------------------------------------
I'm not sure what exactly I should be changing or even which part of the CSS to look at to get the effect.
You can use css3 flexbox.
.server-errors li {
align-items: center;
display: flex;
}
Output Image:
.server-errors ul {
border: 1px solid black;
list-style: none;
padding: 10px;
width: 150px;
}
.server-errors li {
align-items: center;
display: flex;
}
.server-errors li:before {
margin-right: 10px;
content: "D";
font-family: "pictos";
}
<div class="server-errors">
<ul>
<li>
<label>Long error message goes -
- X here and it will span -
- three lines</label>
</li>
</ul>
</div>
You can either use flexbox:
.server-errors li {
display: flex;
align-items: center;
}
Or, css table-cell with more browser support:
.server-errors li:before,
.server-errors li label {
display: table-cell;
vertical-align: middle;
}
.all {
width: 300px;
display:flex;
}
li {
list-style: none;
}
.side {
width: 10px;
}
.letter {
width: 100px;
display:flex;
justify-content:center;
align-items:center;
}
.all * {
line-height: 30px;
}
.message {
display: flex;
justify-content: center;
align-items: center;
}
<body>
<div class="server-errors">
<ul>
<li>
<div class="all">
<div class="side">
<span>-</span>
<span>-</span>
<span>-</span>
</div>
<div class="letter">
X
</div>
<div>
Long error message goes here and it will span three lines
</div>
<div class="side">
<span>-</span>
<span>-</span>
<span>-</span>
</div>
</div>
</li>
</ul>
</div>
</body>
I had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this
[[first box] [second box] [third box]]
so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides
each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned
[[first box] [second box]
[third box]]
and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-
.general-cont {
width: 100%;
text-align: center;
}
.each-cont {
width: 32.5%;
display: inline-block;
margin-top: 6px;
}
.each-cont:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}
.img-cont {
float: left;
height: 48px;
display: flex;
align-items: center;
}
.text-cont {
height: 48px;
overflow: hidden;
align-items: center;
text-align: left;
display: flex;
}
<div class="general-cont">
<div class="each-cont">
<a>
<div class="img-cont">
123
</div>
<div class="text-cont">
456
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
ABC
</div>
<div class="text-cont">
DEF
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
QWE
</div>
<div class="text-cont">
ASD
</div>
</a>
</div>
</div>
You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:
.general-cont {
display: flex;
flex-direction: row;
flex-flow: center;
align-items: stretch;
}
.each-cont {
background: #eee;
margin: 0 10px;
padding: 10px;
}
.img-cont {
display: block;
}
http://codepen.io/paulcredmond/pen/rrRvkk
I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pre History
I am building html form, with elements having multiple options ...., but instead of showing it as dropdown, i would like to show them as buttons without using any js, I removed buttons with label pointing to input checkbox.
Problem
I need label (or anchor or div) tag behave exactly like button tag without any extra wrapper tags, I googled all variation doesn't provide same result as native tag button.
<button class="button">
Text
<div>Small Text</div>
</button>
Solutions not work
line-height, padding does not provide same functionality, because button height/width and text length may vary. I tried special webkit style -webkit-appearance: button; no changes.
Mustery Flex
I tried flex
.button {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: inline-flex;
}
<div class="button">
Text
<div>Small Text</div>
</div>
but child div inside button not breaking/warping to new line.
p.s Environment tested, Google Chrome, Safari
I found solution using flex with flex-direction: column; so text and div treats like column items, here is code
label.button {
flex-direction: column;
justify-content: center; /* <-- actual veertical align */
display: inline-flex;
text-align:center;
}
JS Fiddle Demo
Does this does the job ?
div.button {
align-items: center;
text-align: center;
display: inline-block;
border: 1px solid black;
}
div.button div {
clear: both;
}
<div class="button">
Text
<div>Small Text</div>
</div>
Ghost element trick looks work well.
.wrap {
text-align: center;
background: #ededed;
margin: 20px;
}
.wrap:before {
content: '\200B';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered-guy {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #777 dotted 2px;
background: #666;
color: #fff;
}
<div class="wrap" style="height: 512px;">
<div class="centered-guy">
<h1>Some text</h1>
<p>Bool!<br>Look at me, mama!</p>
</div>
</div>
I wanted to create a list of items by displaying a name, a list of properties and an image. Although this seems like quite a common and easy problem, I am struggling to get it right.
After having changed the markup a dozen of times, I chose to represent the list by a ul in which each li consists of a h3(name), a ul(properties) and a img(image).
In order to make it fill the page a bit more, I used CSS's flexbox in order to put the image and the properties next to each other in a responsive way.
img {
max-width: 100px;
}
#example > ul > li {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
This looks pretty nice when the properties for all elements are equally long, but it kind of looks messy when this is not the case (the property-lists are not properly aligned as indicated by the red lines in the above snippet). I know I could get all the content in a table, causing every table element to be aligned nicely under each other, but then I don't know how I can have my names in a different line than the properties and the image...
My question could thus be formulated as:
How can I align the properties nicely under each other in such a way that they are displayed next to the image (to fill the space on the screen)? Additionally I would like that the image is displayed under the properties when the screen becomes too small (i.e. responsive design) and a separate line for the name.
Any help will be greatly appreciated
Update:
As it turned out that my question is not that clear, I tried to make it more clear by adding the vertical red lines in the snippet. I manage to get the desired result when using a table, but then I have to omit the names (as shown in the attached image) and the responsiveness...
You can just create a simple item element, something like this:
HTML
<li class="item">
<h2>Charmander</h2>
<div class="content">
<h3>Properties</h3>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<div class="image">
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</div>
</li>
I simply divided the element in three main sections: title, properties and the image.
As you can see the properties are still inside a <ul> because they are used like a enumeration.
CSS
#example > ul {
padding: 0;
}
.item {
width: 100%;
background: #CCC;
padding: 20px;
box-sizing: border-box;
/* Padding will be inside the element (will not affect the width/height) */
margin: 20px 0;
overflow: hidden;
/* Used to keep the floated element inside the flow */
}
.item h2 {
text-align: center;
}
.item .content {
width: 60%;
float: left;
padding-left: 20px;
box-sizing: border-box;
}
.item .image {
width: 200px;
float: left;
}
.item img {
width: 100%;
}
.item .content ul {
border-left: 2px solid red;
margin-bottom: 20px;
}
With the first selector (#example > ul) I reset the default padding it has.
The text of the properties will just start on a new-line if it is too long (you can test this by resizing the window).
You can just edit the padding-left of the .content element, to move the properties a little bit more to the right or to the left.
Example JsFiddle
This is just to give you an example of how you want to approach this.
Hope it was helpful!
I have just been so stupid. As an alternative to the helpful answer of nkmol, it could also be as simple as changing the justify-content property to space-between and correct it by setting width and auto-margins.
img {
max-width: 100px;
}
#example > ul > li {
width: 80%;
margin: auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
h3 {
width: 100%;
text-align: center;
}
li > div > ul {
border-left: 2px solid red;
}
<section id="example">
<ul>
<li>
<h3>Bulbasaur</h3>
<div>
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</li>
<li>
<h3>Charmander</h3>
<div>
<span>Properties</span>
<ul>
<li>orange or some kind of red, I am not completely sure</li>
<li>lizard</li>
<li>fire</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
</li>
<li>
<h3>Squirtle</h3>
<div>
<span>Properties</span>
<ul>
<li>blue</li>
<li>tiny turtle</li>
<li>water</li>
</ul>
</div>
<img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
</li>
</ul>
</section>
PS: I'm sorry for my awful question...
You need to break out your items from the primary UL
You can think of it as though you were building a table, but instead, use divs and then use a UL just to list the properties. This way, you can style each of the individual elements as needed.
look here: https://jsfiddle.net/oq04f6pm/2/
<section id="example">
<div class="section-title">Bulbasaur</div>
<div class="section-list">
<span>Properties</span>
<ul>
<li>green</li>
<li>seed</li>
<li>grass</li>
<li>poison</li>
</ul>
</div>
<div class="section-image">
<img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
</div>
</section>
img {
max-width: 100px;
}
.section-title {
width: 100%;
text-align: center;
font-weight: bold;
}
.section-list, .section-image {
width: 50%;
float: left;
}
.section-image {
text-align: center;
}
#media screen and (max-width: 400px) {
.section-list, .section-image {
width: 100%;
}
.section-image {
text-align: left;
}
}
I have a parent div (.tags) that contains links and a title.
The parent div is set to display: flex; with flex-wrap: wrap;.
I would like the link elements to break onto a new line, clearing the title when the wrap effect takes place.
I have tried using flex-grow: 1 on the title, but this makes it push the links to the right of the screen at all times, which is not what I am after.
I have attached the code I have so far, but here is a link to the Codepen
What I am trying to achieve:
Default - the width of the screen is large enough so nothing wraps and everything is on one line >
Wrapped - the width of the screen is smaller, the wrap has occurred - the title now has 100% width and the links clear it >
Note that the number of links could vary.
.container {
background: lightgray;
width: 100%;
}
.tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.tags span {
margin: 1rem;
}
.tags .tag {
margin: 0.2rem;
padding: 0.2rem;
background: dodgerblue;
color: white;
}
<div class="container">
<div class="tags">
<span>Tagged in:</span>
<a class="tag" href="#">capabilities</a>
<a class="tag" href="#">sales</a>
</div>
</div>
Yes, with a change in the structure.
Wrap the tags in their own div with flex:1. Then it will expand automatically and the tags will drop to the second line when the wrap occurs.
.container {
background: lightgray;
width: 100%;
}
.tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.tags span {
margin: 0 1rem;
}
.tags .tag-wrap {
display: flex;
flex: 1;
}
.tags .tag {
margin: 0.2rem;
padding: 0.2rem;
background: dodgerblue;
color: white;
}
<div class="container">
<div class="tags">
<span>Tagged in:</span>
<div class="tag-wrap">
<a class="tag" href="#">capabilities</a>
<a class="tag" href="#">sales</a>
</div>
</div>
</div>
Codepen Demo
flex grow of 1, flex shrink of 0, flex basis auto:
span {
flex:1 0 auto;
}