2
I wonder if it is possible to make a table containing a "text" in the middle of its lines!
Follow an example:
2
I wonder if it is possible to make a table containing a "text" in the middle of its lines!
Follow an example:
3
That’s what you’re looking for? http://jsfiddle.net/MeeW2/
HTML will look like this:
<div>
<h1><span>Div title</span></h1>
</div>
And the CSS, like this:
div{
border: 1px solid #000;
width: 200px;
height: 200px;
}
div h1{
text-align: center;
margin-top: -10px;
height: 20px;
line-height: 20px;
font-size: 15px;
}
div h1 span{
background-color: white;
}
Originally posted here: https://stackoverflow.com/questions/19868267/div-title-on-div-border-how-to
3
Uses a fieldset
. The tag fieldset
must necessarily have a daughter tag legend
, which is his text. Looks exactly as you want, this tag was created for this.
<fieldset>
<legend>Texto</legend>
foo
</fieldset>
Example in Jsfiddle. I edited the example to be more central.
Now just leave the edge as you want and be happy. You can also reposition the Legend using margins and padding.
I don’t think it will look that way as the image describes it. Maybe added a style(css
) could get there.
@Cold missed the tag with the text. I just corrected.
But still, I don’t know if the caption would be in the center, as in the image. That was my question.
@Cold look my fiddle ;)
@Renan doesn’t know that tag. What would be its compatibility with older browsers, I know that in HTML5 it would run smoothly, but I wonder about the IE (old) and the MOBILE versions of the respective.
Yes, it was that portion CSS
who was complaining @Renan :P. Now, will 50% on margin-left
puts the text in the center? I tried to write a larger text and it gets a little strange. I recommend the text-align
.
@Freddutra Compatible with IE9. I believe with IE8. All other browsers support, including mobile (as far as I know). This field was a recommendation in HTML 4, and is already part of HTML 5. Look at MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility
@Freddutra, for compatibility see: http://www.w3schools.com/tags/tag_fieldset.asp. As for seniority and mobile versions, um, I will have to search more.
@Cold will leave the CSS in charge of the OP, but you’re right. Margin 50% does not centralize.
At peace @Renan. I wonder why in today’s web world we have to worry about minimal things. Only one correction, if you know the size of your div/text, you can center by doing left: 50%; margin:-valor da div
. Now I can’t remember whether it’s margin-left or margin-right :/
I think it’s margin: auto or something. If someone knows, feel free to edit Fiddle.
Browser other questions tagged html
You are not signed in. Login or sign up in order to post.
That would be right @Freddutra!
– Alexandre
It works, and it’s interesting how it solved itself. But I noticed that if, for example, the font size is a little bit larger, it can overlap other elements of the page by using the
margin
a negative, giving the text a kind of absolute position. I believe that after the OP will improve neh... :)– Cold
Have my +1 good sir.
– Oralista de Sistemas
Yes, the OP should change to his needs. On this source issue, we can make both changes to the CSS itself and we can also use
media_query
, Jquery, or a Compass to make different versions ;)– Fred Dutra