I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
Related
I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
https://jsfiddle.net/87xzwj5t/
It's white-space that's doing you in.
Add this CSS:
.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }
and it'll fix your problem.
The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).
Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.
JSFiddle example
Remove the whitespace in html, i will work
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:
.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }
EDIT
What Josh said may be true. Why don't you just float them? Like this:
.span_1_of_2 {width:50%;float:left; }
.span_2_of_2 {width:50%;float:left; }
Then of course clear the float.
Just add float:left; to the first span
CSS
.span_1_of_2 {
width:50%;
display:inline-block;
float:left;
}
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.
DEMO HERE
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
I have a title (h1) which is centered on the page. I want to add lines to the left and right of the title, so that they fill the rest of the page's width.
However, I want the lines to adapt to the title's width, which is dynamic. So, I want the line's width to be dynamically calculated.
Here's an example of what I'm trying to accomplish: http://jsfiddle.net/cAEqE/1/
In the example I set the lines' width to 35% so they could get the effect that I want. However, if the title is longer, it will break into 2 lines, and I don't want that to happen.
My boss told me to avoid javascript, so it would be excellent to use only CSS. However, if this turns out to be impossible, I will turn to good old jQuery.
Cheers!
Edit: the website has a background-image, so I can't use a background on the h1. Thanks!
You can write like this:
CSS
h1 {
font-size: 26px;
text-align:center;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
background:#fff;
padding:0 10px;
}
#title {
text-align:center;
border-bottom:1px solid #97999C;
height:10px
}
HTML
<div id="title">
<h1>TITLE TEST</h1>
</div>
Check this http://jsfiddle.net/cAEqE/27/
UPDATED
Check this http://jsfiddle.net/cAEqE/63/
Instead of using divs for the lines, you should use a background image on the parent div.
For example, your HTML would be much simpler:
<div id="content">
<h1>TITLE TEST</h1>
</div>
And your CSS would be:
h1 {
font-size: 26px;
background-color: white;
display:inline;
padding:0 30px;
}
#content {
text-align:center;
width:100%;
background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
margin:0;
padding:0;
}
I've stolen a fair bit of this code from Jira which does basically what you're after.
I'm using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.
I would like the text "0 of 0" centered in this markup (as a fiddle):
HTML:
<div id="invoiceImageContainer">
<img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
<div id="invoiceNav">
<img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
<img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
<span id="invoiceCount">0 of 0</span>
</div>
</div>
CSS:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount {
text-align:center;
}
What am I doing wrong?
You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.
Updated fiddle: http://jsfiddle.net/W5jQd/3/.
Good old quick hack:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
text-align:center;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount
{
line-height: 35px;
}
In your original markup you had #invoiceCount set to text-align:center. This is wrong because you can't center spans in that way, so I moved it to your container div.
The quick hack is the line-height, set to approximately the known size of your image. This technique is good and safe when you are doing a single line of text and the size of the elements involved is known.
This will fix it:
/* should be block level element */
#invoiceCount{
display: block;
}
See here: http://jsfiddle.net/W5jQd/5/
You could add the following to the CSS of #invoiceNav
text-align: center;
line-height: 32px;
the first centers the <span> element and the second centers the text vertically in the <div> (same height as the images)
The problem is caused by the fact that doesn't support "width", since it's an inline block. The following changes will do the trick: in HTML change <span id="invoiceCount">0 of 0</span> to <div id="invoiceCount">0 of 0</div> and in CSS add width to the #invoiceCount like this:
#invoiceCount {
text-align:center;
width: 100%;
}