I have an h1 and I want to put a border around the inner text only. The problem is that the border will naturally fill the entire block which means it covers the length of the page.
I can't turn it into a span because I need the text to be horizontally centered in the middle of the page.
How do I get the border to only wrap the text?
Simply give the element a display of inline-block, and apply text-align: center on the parent:
h1 {
display: inline-block;
border: 1px solid black;
}
div {
text-align: center;
}
<div>
<h1>Title</h1>
</div>
Related
I'm trying to implement a colored underline by putting the selected text in a span element and then giving the span a colored bottom border, like
border:bottom: 1px solid red;
This works, but the line is too far under the word:
Here's the border around the entire span element:
Does anyone see a way to reduce the height of the span element so the bottom border is closer to the word?
Thanks
Inline elements don't have a height, so you can change the display property to something like inline-block, and then use the line-height property to move the border closer:
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 10px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
You can also use height.
span {
border-bottom: 1px solid red;
display: inline-block;
line-height: 20px;
}
Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?
For my html code I am trying to inline my text and put it in the center, what's wrong?
div.wrapper a {
display: inline;
text-align: center;
text-decoration: none;
color: #808080;
}
You dont put the text-align on the text element itself.
If you have the structure like this:
.wrapper and inside an <a> or <p> element. than you put the text align: center on the div so everything center inside this div.
Example: http://jsfiddle.net/q0ouh6b9/
.wrapper {
text-align: center;
}
You can do the following:
div.wrapper a {
// All other properties
vertical-align: middle;
}
When you set the anchor element to inline, it will not extend the full width of its element. To do what you want, apply text-align:center to the div element, or set the anchor to display:block; with a width of 100%.
The first will make all text inside the div centered while the second makes the text take up the full width and centers it within its own block.
I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.
I am trying to centre an anchor element within a div element both horizontally and vertically. The basis for this question is as follow.
<div></div>
<div></div>
<div>
Hello
</div>
<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background-color: teal;
box-sizing: border-box;
margin: 10px;
float: left;
text-align: center;
display: table-cell;
vertical-align: middle;
}
a {
color: white;
text-decoration: none;
font-style: 14px;
}
Now, I know that I can use text-align: center; on the containing div to centre the anchor element horizontally and that I can use display: table-cell; vertical-align: middle; on the div to align it vertically but it doesn't seem to work together, especially when the div is set to float left.
How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.
I would prefer not to use line-height since it breaks with multi-line text.
http://jsfiddle.net/xHLze/2/
You basically listed the answer in your question, though you may just need to apply the styles to a few different places:
I put display: table; on the containing <div>, allowing me to set display: table-cell; on the <a> element, after which I can apply vertical-align: middle; to vertically center the text.
I then applied text-align: center; to the <a> element to horizontally center it.
http://jsfiddle.net/3RfgD/
What I believe you missed is that you should be setting display: table; on the table-cell elements parent in order for it to work properly. (an element cannot act as the cell of a table if it is not in a table, whether it's an actual table or a CSS one)
Use margin for your anchor tag to auto align it in the center of your div tag like this:
a{margin:0 auto;}
This automatically centralizes your text both vertically and horizontally. :) but since anchor tag is inline tag we need to specify it with respect to the div tag like this
div a {display:block;
width:50px;}
where 50px is with respect to div's width. Check out here why margin 0 auto doesn't work
I have 2 div: one parent and one child. User can add this div with button click and they set the text value. I want to display these dives in border inline-block(3 items in 1 row, like new tabs in chrome). And I want to display this text in the center of border.
There is css code:
.parentDiv {
width: 300px;
height: 200px;
margin: 5px;
border: solid 1px black;
display: inline-block;
font-size: 24px;
}
.childDiv {
text-align: center;
vertical-align:middle;
}
Here's a jsfiddle to show you a solution: http://jsfiddle.net/nfLu3/
.parentDiv {
...
line-height:200px;
text-align:center;
}
.childDiv {
display:inline-block;
line-height:1;
}
the keys are:
set the line-height of the parent container to its height (200px) and the text-align to center. So some text appears exactly in the middle of your box.
set the child container to be display as inline-block. In this way it's oriented at the text around (it's important!). The text around (I mean the line breaks and spaces before the child container) has a line-height of 200px and the child block has vertical-align:middle, so it will be centered.
there you go
I have an anchor element that looks like this
<img src="imgurl"/>Text
I would like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text.
Vertical align only really applies to sibling elements. This should work:
<img scr="imgurl"/><span>Text</span>
With CSS:
a img, a span { vertical-align: middle; }
How do you mean "vertically align"? Should they be next to each other, or on top of? In case of next to each other, should the text be aligned with the top, center or bottom of the image?
If your problem is that they are displayed on top of each other instead of next to, add the following to your css:
a img { display: inline; }
If your problem is the opposite, add this:
a img { display: block; clear: both; }
and see if that helps.
The Proper Way to Align Images and Icons with Anchor Tags is
In your css
a {
background: transparent url(/images/your_image) scroll no-repeat left center;
padding: 2px 0px 2px 20px; //fit as you need
}
In your HTML
Text