please take a look at this page.
As you can see there are some "read more" buttons. (translated - "czytaj więcej").
This are just after the excerpts. I want to center this read more button.
I gave the a href ... the following class:
class="readmorebtn"
And this CSS:
.readmorebtn{font-size:23px; text-align:center !important;}
But for some reasons it's not working. Any hints?
You are using a element for your button, so a element is inline by default, so even if you center, the text has no place to get centered,as inline elements don't take 100% horizontal space, so inorder to center the text, you need to make it inline-block or block
.readmorebtn {
display: block;
font-size: 23px;
text-align: center; /* No need of !important here */
}
If you are using inline-block the element will be inline and also block but again, you need to define some width to your inline-block element. Whereas block level element will take up entire horizontal space.
Demo (See what if you don't make it a block level element)
Demo 2 (Making it a block level element)
a element can't have the width because it's an inline element and without width you can't align to center so you should add display: inline-block; or display: block; to your a
.readmorebtn {
display: block;
font-size: 23px;
text-align: center;
}
Related
My button, defined as <a href='#' class='button'>Click</a> and styled as .button { background: red; padding: 20px; }, isn't vertically centered because the font I'm using has more inherent space below it than above it. Is there a way to center it without changing the markup, and if not what's the best option?
EDIT: using line-height instead of padding works for default font, not with the one I'm using.
(the gray around the button is my page background not a border)
Use line-height. This sets the height of the text and provides an invisible, equal padding vertically. Note, this trick will only work on block elements. So if you want to use it on an a tag, you will need to convert it to a block element (using display: block)
a.button {
background: red;
color: white;
text-align: center;
width:100px;
/* The magical lines */
line-height: 3em;
display: block;
}
<a class="button">Text</a>
This is ideal for single-line text in an element--not so much for multiline elements.
Use line-height property instead of padding for vertical center alignment
Imagine h1 is inside a div:
Compare two styles: What is the problem with inline-block?
h1 {
display: block;
Width: 150px;
margin: 0 auto
}
h1 {
display: inline-block;
Width: 150px;
margin: 0 auto
}
As their name implies, inline-blocks are laid inline. Auto margins have no effect on inline and inline-block boxes.
This isn't a "downside" or a "problem" with inline-blocks per se; it's just how inline formatting works. There is little reason to use an inline-block for anything other than putting a block container on a line box.
You could wrap inline-block styles around a block. That way you still get to control margins.
.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>
You may add as many inline blocks and will just work.
Well...a bit late, but still useful, I hope.
First of all: a visual example is here on the Jsfiddle.
Remember that "headings" are block-level elements (see MDN), so the display:block; is somewhat "implicit".
When you add the display:inline-block;, you are in fact removing the "block-level" element status thus making it behave differently: in your specific case, margin: 0 auto means 0-pixels margins on top and bottom, while 0-pixels margin on the left and "whatever it is" on the right. Just like any text on your page. So, you could add something after the <h1> tag, to have it show up inline (of course) with the heading (see JSFiddle example).
On a display:block; element, on the contrary, the left and right margins would be calculated so that the element remains on the center of the parent.
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
The title may be a bit misleading.
http://jsfiddle.net/whb8A/
I have a h3 element inside a span tag and of course it shouldn't go there, however I cannot seem to style the spanned text in the div in the manner I want.
If you hover over the image in the jsfiddle, the hidden div is shown and that is exactly what I want it to look like but if I take the h3 tag away from the text I can't seem to style it with CSS.
Should I be looking at a Jquery alternate? If so any tutorials of guides would be great, thanks
UPDATE: Thanks for all the help so far but I don't think I've explained very well.
http://imageshack.us/photo/my-images/827/examplewc.jpg/
The left side is how I would like it to be styled however removing the h3 tags and removing h3 from the class .info causes it to be styled as on the right side. It's the border width, postion and padding I am concerned about the most
Another solution is to put the text style definitions directly under the <a> tag, so as to override the default anchor tag styling. Example:
.featured a {
color: #fff;
text-transform: uppercase;
}
If anyone is interested I solved the problem.
Instead of using the h3 tags and a span, I removed both and instead put a div inside the div that appeared on hover. You can see what I mean in the below fiddle. Now validates in html5 which is what I was after, thanks for all the help
http://jsfiddle.net/whb8A/62/
All I see when I drop the <h3> tag is a loss of margin around the text. If you want that back, simply replace the <h3> with a <span>, change the CSS to match that instead of the h3 and add display: block to the rule.
You have this near the end of your CSS:
.item a:hover .info {
display: block;
position: absolute;
bottom: 10px;
left: 30px;
width: 250px;
margin: 0;
padding: 10px;
background: #000;
}
This will select all .info elements inside of hovered a tags inside of a .item element, but in your HTML you have no .item element
Remove .item from the CSS and all is well when you remove the H3
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}