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.
Related
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.
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 sure i'm doing a few things wrong here, but I can't seem to narrow down where the specific issue is that is causing the problem:
http://www.accessdigitalmedia.com/modaltest/ibtest.html
The text "1 Healthy Midday Meal for One Child Overseas" is ignoring the 5 px right padding on the parent div. I think the problem may be the table inside the div. When I look at it with firebug, it appears that the table cells are shifted a pixel or two to the right and overflowing out of the parent container.
I am required to keep the tables in there for something the programmer I am working with needs. Can anyone help me get the content / text properly padded inside the box?
Thanks!
If you give any padding to div, the content of that div -> table will be shifted.
For giving padding to the text either give it to anchor tag or heading tags which contains you text.
h4 {
width: 90%;
}
.table.cat-table-item {
margin: 0 0 15px 5px;
}
Will do it.
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 looking for a HTML/CSS solution to a problem we've encountered on a site we're building.
I am happy to implement a JavaScript based solution if I need to, but I'd prefer it was handled natively.
We have content managed text which needs to sit inside a designated area but wrap if it exceeds the available width.
Behind the text is a background colour with opacity.
When the text is short, due to the float, the container collapses to the width of the text.
When the text is long, and a wrap occurs, the container hangs out at the maximum width, even though the text inside has wrapped underneath, so there's a small section of background colour on the right side (which isn't big enough for the wrapped word)
I want the container to collapse to the edge of the previous word so it doesn't "look like" there is space for the wrapped word, when it is very close.
HTML
<div>
<p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>
CSS
body div {
background-color: #AAFF3B;
max-width:80%;
padding:20px;
display:inline-block;
float:left;
}
body p {
display:inline-block;
background-color: #FFAA3B;
position: relative;
float:left;
white-space:pre-line;
clear:left;
}
Here is a JSFiddle: http://jsfiddle.net/nmuot8bm/3/
If you look at the 3rd example, you can see a small amount of padding on the right hand side of the orange box, where the word porttitor has wrapped underneath to a new line but the orange container still sits at the maximum width, despite the float.
If line breaks are introduced by the content editors (e.g. between vestibulum and porttitor as per example 4) then the container collapses correctly.
What I think is happening is the container grows before the text wraps and the browser doesn't recompute the width after wrapping?
Here's a picture of my test case shown in the JSFiddle:
Here is a picture of the fault on the staging site (before separated out to a JSFiddle):
You can see that the text has wrapped, but the container has not collapsed, leaving a big gap of background colour.
n.b. We can emulate this by doing text-align:justify but then the spacing between the words is not consistent with the rest of the text on the site.
edit: I see that this question may be a duplicate. I swear I did research before I posted!
max-width adjusts to fit text?
CSS Width / Max-Width on Line Wrap?
Wrapping text forces containing element to max-width
Shrink DIV to text that's wrapped to its max-width?
I think that the general consensus/conclusion is that it is not possible without bleeding edge CSS and I should use a JavaScript solution.
I have added a few more examples to my JSFiddle: http://jsfiddle.net/nmuot8bm/6/
including the JavaScript solution from here: https://stackoverflow.com/a/33246364/647728
Not possible with CSS...that's the way the inline box model works
JS example/solution can be found on the JSFiddle
If the problem is floated elements collapsing the parent container, there are many solutions; the easiest among them being adding overflow: hidden or display: table to the parent (the thing collapsing). Also be aware that inline-block and floated elements are essentially redundant.