What's the best way to position items in two columns, each of which has display:flex? I'm coming across the problem that when the text wraps everything below it moves out of alignment. I'm fairly sure this wouldn't happen if I just used a grid, and I could alternatively position the text absolutely - but is there a better practice? Am I looking at this completely wrong?
-------------------- --------------------
image image
a header a header
that wraps at this
size
some content
content that doesn't
line up any more
justifying with space-around / space-between and using flex-grow doesn't get the desired effect because the available space is different in each column when the text wraps.
i guess i can just justify:flex-start; and then set the margin-top of each item to allow enough space?
here's a codepen of the problem. sorry if it's obvious, i'm pretty new to all this and have tried!
https://codepen.io/nwoodward/pen/ZxLWPO?editors=1100
If I understand your question correct, you want to 'center-align' the heading and the contents once it wraps.
For which, you may set a text-align center to both <p> and <h2> and also specify a width if you want the wrapping to happen after a specific limit.
.icon-card > p,
.icon-card > h2 {
text-align: center;
width: 300px; /* Optional */
}
CODEPEN
Hope this helps.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to build up a responsive image gallery by following w3schools tutorials. Everything seems to working very fine except one serious issue. I googled a lot but couldn't find any silver bullet solution to fix it. I'm posting a screenshot to make your better understand about my issue. Here's a look:
It's very much obvious what's the real problem. Right. So what should we do? Should we have to give a min-height for every div? The text comes dynamically from the database and sometimes it is mandatory to display complete text without trimming it.
Note:
Using min-height causes one another problem. When we resize the browser to tab width then it creates a lot of blank space between div rows.
You've not post a code, so I can offer you a flexbox solution.
Here's a Fiddle.
These flexible boxes will stretch according to the text and they will fit the parent container, regardless of the text inside. I hope it will help you. Flexbox is a layout system which is very powerful and easy to learn, and it is mobile ready.
.flex-container {
display: -webkit-flex;
display: flex;
width: 500px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
flex-basis: 200px;
margin: 10px;
}
.img {
width: 200px;
max-width: 100%;
height: auto;
}
In case that (almost) full and guaranteed support for the latest IE versions is required (or you want a fallback of some sort), and you do not wish to use JavaScript, there's also the option of using text-align: center on container and on image wrappers display: inline-block as well as vertical-align: top.
The text-align: center isn't actually required, but it will center the image wrappers (containers of image and image text).
This will still leave some white space beneath the image wrappers but each image will start on the same line, so to speak.
You can see a fiddle here, based on the layout of #Julsy : the fiddle
Note:
This solution does have a slight downside regarding white space due to the inline-block elements. This means that sometimes setting two inline-block elements to 50% width each will make them jump to each separate line. However I've used this solution in several applications by simply setting the width to 49% e.g. In many cases the difference isn't noticable at all, and given the white space between the elements they often are aligned properly (in my opinion). The white space can even make up for some of the spacing between the elements such as margin.
The white space stems from the actual spaces in the text of your HTML document.
You can read a bit about the phenomenon of these white spaces here. It seems that it's not really an error, but just the way the browser works.
The prettiest solution in my opinion surely is the one #Julsy suggests (the flexbox method).
As to why your own code isn't working is due to the float. When one of the elements is lower (lower height) than the other, the element following it will "float" underneath it. I think that the logic behind this can be thought of as the following (correct me if i'm wrong): if you view the containing element is a set of "text lines" (as in a regular book or text in here) with a reading direction from left to right, the element with float:left will attempt to get as close to the upper-left corner as possible (which is where you start reading from). In this case, the closest place to the upper-left corner is beneath the lower element as this is on a "line" above the bottom of the highest element.
I hope it makes sense :-)
As you already wrote, a min-height is the best method to make those floated boxes be the same height and still have the "emergeny option" to expand them if there is more content.
Add display: flex to the parent element. For more info about flexbox.
i tried to do the same with only css, but i got tired, maybe u can use javascript to fit these kind of stuff with different heights, because these needs to be calculated, i use this: http://masonry.desandro.com/ basically this convert every element with position absolute and give it top and left positions from prevs/next elements, for example
the first (size 100x200) will got left 0 and top 0,
the second (size 100x400) will got left 100 and top 0,
the third (size 100x200) will got left 0 and top 200,
the four (size 100x200) will got left 100 and top 400)
and continues...
I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:
.btn {
height: 22px;
line-height: 22px;
}
And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.
line height is the amount of space above and below elements. thats pretty much all I can tell you.
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
Here is a link that demonstrates this
.shorty
{
height: 12px;
}
.liney
{
line-height: 25px;
}
Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}
You can play with the examples available in w3schools.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height
Ref:
http://www.w3schools.com/cssref/pr_dim_line-height.asp
It helps me to understand CSS3 syntax and attributes even more.
I hope my share could help you. :)
Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I'm designing a web page and have been banging my head over this for the last hour with no luck.
I'm writing a few paragraphs and want it to follow two constraints:
1) The div that it resides in needs to be centered, but I don't want the actual text inside the div to be centered. An example would be the links/text here: http://paulstamatiou.com/
2) I want to constrain the text to the size of the div, and when a line meets that boundary, it breaks the line wherever it is and simply continues with left alignment on the next line. When I shrink the window, I don't want to hide any of the overflow.
My <pre> tags have the class preformatted, which I've customized as
.preformatted {
font-family: monospace;
white-space: nowrap;
text-align: center;
}
Sorry for the noobish question, I've tried to find my solution elsewhere. I've been messing with the overflow, whitespace, and some other tags to no luck. There has to be an easier way to do this than individually spacing each line like I'm doing right now.
Not sure I understand your question, but you can center a div with margin: 0 auto without affecting the alignment of the text it contains. Each line of the text will break to a new line once it reaches the width of the div. Here's a jsfiddle demonstrating:
http://jsfiddle.net/Vx9K9/
1) There are couple of ways to center your div. One and old method is margin: 0 auto;. Also you can try position or margin which satisfy your needs.
2) If you want to wrap your text up when it exceeds the border of div, you need to use overflow:hidden; on your div object.
Here is my html/css code. Please, move border horizontally until you get last row containing less elements then rows above.
http://jsfiddle.net/wb5kT/
Problem starts here. I do want to center entire thing horizontally, so left and right distance from page borders to text would be the same. However, last visible row should be aligned to the left.
I do not know beforehand what width of viewport will be, or total number of elements.
Adding "text-align: left" to .images aligns elements in last row to the left, but breaks entire "center align" thing. Example: http://jsfiddle.net/dgLQC/1/
Can it possibly be done without using tables?
IE 8 or lower and old versions of other browsers can be ignored.
I don't think you can do this even using tables; once you have content that's too wide for the container, the container will assume its parent's width, even though the content happens to be wrapped to fit in a smaller width.
By the way, to ensure that there is an incomplete last row (assuming more than one row) of elements, choose a prime number of elements.
put float:left in .thumb.
See this, http://jsfiddle.net/C5Pev/
Update:
My bad, above code is not working as wanted. A possible workaround would be,
http://jsfiddle.net/C5Pev/7/
Not sure if I understood your question correctly, but seems like you need to align the text inside the last row (two divs) to the left while keeping all others with the text centered:
You can apply a class for that:
.alignLeft {
text-align: left;
}
And give that class to the last two divs.
Here is the Fiddle Example!
EDITED:
Your question should be rephrased, it is leading to wrong conclusions on what your goal is, but is this what you are looking for:
See this Fiddle Example!
Relevant CSS Update:
.thumb {
float: left; // align divs to the left of each other
text-align: center; // center text inside the div
position: relative;
border: 1px solid #D9D9D9; // view the blocks, not needed
margin: 1px; // get some distance between blocks, not needed
font-size: 10px; // small text to view that's centered, not needed
}
Tip:
Shrink horizontally until you get 3 blocks by row, thus having the two divs with the text I am on the last row! alone on the last row.