i got a question about how to center a text inside a div in html / css.
I have a h3 tag like this
<h3>Pacuraru Daniel Pacuraru Daniel</h3>
or
<h3>Pacuraru Daniel</h3>
and the css
h3 {
width: 100%;
height: 28px;
display: block;
}
If I have a name longer than 1 line, then the 2 lines of the text fit in the div, but if there is only 1 line, I want it to be vertically centered not aligned on top.
EDIT: i have this layout and i want in the both divs the text to be centered vertically
http://jsfiddle.net/shRRz/3/
I have found the way to do it. It seems i need to use this css to make it align like i wanted.
display: table-cell;
vertical-align: middle;
Thank you very much for the tips, people.
Related
There is section inside which i have defined text-align as left for a line but its not taking effect for some reason
<section id="topic1">
This is a centered Heading for Topic 1<br>
<span class="text">This is a left aligned line</span>
</section>
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: inline-block;
text-align: left;
}
I tried display: block for text span tag in above code and text got aligned to left but i am looking for a alternative way to do this
Reason for finding alternative way - Even tho block display is aligning text to left , keeping display as block for all the span tags within my webpage increases the space between each span tag for some reason
Practical example below
<span class="text">This is line 1</span><br>
<span class="text">This is line 2</span>
.text {
display: block;
}
If you check output of above code there would be space between line 1 and 2 because of display block .
I am okay with using display : block to make text align work for span tag
But then this unnecessary space created by block display bothers me
Isn't there any way to avoid that unnecessary space ( seen between line 1 and 2 ) created while using block display
An inline-blockelement is only as wide as its contents, in your case NOT the full width of the container.
In their container inline-blocks are aligned according to the text-align setting of the parent element (= the container, in your case #topic1), thats why they are called INLINE-blocks.
So if you want it left-aligned, you have to change the alignment of section to left. And wrap your to be centered text in a heading element (like <h1>...</h1>, wich is a block element having 100% width by default) to which you apply text-align: center. And BTW, that would also improve the semantical quality of the HTML - headers should be wrapped in header tags.
About "unneccessary vertical space between lines": That the default margin-top and margin-bottom of these elements - you can reduce those by defining them in the CSS for the according elements)
You can do something like this using margin. This will allow you to adjust the spacing between the blocks. Also, you can remove the br tags.
section {
text-align: center;
height: auto;
width: 100%;
}
.text {
display: block;
text-align: left;
margin: 10px 0;
/* CHANGE THIS VALUE */
}
<section id="topic1">
This is a centered Heading for Topic 1
<span class="text">This is line 1</span>
<span class="text">This is line 2</span>
</section>
You have a space after the period.
To select class="text", use:
.text
not
. text
Try adding float: left instead of text-align:left. As span element or inline-block element take only fit width. float will help align the item with respect to parent.
https://codepen.io/pratik-sangami/pen/dybKMVz
I'm using a span element to create a container for an image with a caption. I want to center the image on it's own line, just like I would center an image using <center> and <img>.
When I use the span container with "float", it works, but as soon as I remove the "float" property the I can no longer set the span width.
<span class="imageholder" style="width:150px">
<img src="https://gallery.mailchimp.com/37f4256f7c29a1b3335eb535e/images/62f05d38-ae67-40d1-bf14-7773330b8169.jpg" width="100%" alt="Roux and Mary at the Good Food Festival">
<span class="caption" style="width:150px">Roux and Mary at the Good Food Festival
</span>
</span>
jsfiddle
The top image is the result I am looking for, minus the container. The middle image shows the container with caption, using "float:left". The bottom image is the one I'm trying to center.
Thank you!
<span> is an 'inline' element. You're attempting to treat it as a 'block-level' element. Adding float: left; forces it to become 'block-level', and then you can apply something like width: 100%; text-align: center; to center the image within. An alternative to float: left; is to set display: inline-block; on your span tag. This leaves you with much the same circumstance though... you'll need to add width: 100%; text-align: center; to center the nested image.
I am trying to do a vertical align for my texts and images.
It seems the texts are aligned to top in my jsfiddle
text here --
| |
--
I want to have my text to be like
--
text here | |
--
http://jsfiddle.net/wjPxS/
I can't really change my image float right in css. Can anyone help me about it? Thanks so much!
Seeing as you know the height of your container you can just set the line-height the same as height to vertically align the text.
Demo
.div1 {
height: 20px;
line-height:20px;
}
updated jsFiddle
You need to apply
display: inline-block;
vertical-align: middle;
to both img and span. In jsfiddle I replaced span with `div'.
Though, this doesn't let you float the img to the right.
I have two columns (div { float: left; }, as you may know) in the Bootstrap Structure. The problem is to make the content inside one div go the middle (vertical). So, it doesn't matter the height of the second columns, the second column will always be on the middle.
It is not an line of text. In my case will be an image and a title. Two blocks of elements.
Here's the example: http://jsfiddle.net/almino_melo/L4rK5/.
I tried to put another div inside it with display: table; rule and then another one with display: table-cell; and vertical-align: middle;. But it didn't work.
Here's my updated fiddle, http://jsfiddle.net/L4rK5/9/ , it does what you ask but does seem really rather crude, note the change in the html div structure as well as the following css rules.
.text-center{
width: 100%;
position: absolute;
top: 50%;
}
I have a button and with some text next to it, like this,
----------------
| |
| Button | Text
| |
----------------
I would like to have the text vertically aligned to the center of the button. How should I do this in CSS?
Here is my attempt:
http://jsbin.com/oduma4/4
I have found two problems with this approach:
The text is displayed on top in IE 6.
The two elements flow out of parent div so this layout will interfere with other divs.
To center text vertically set the line-height to the same as the height, for example:
#form-actions{ height: 30px; }
#text{ line-height: 30px; }
And set vertical-align to middle:
#text{ line-height: 30px; vertical-align:middle; }
So long as the element you are trying to vertically align and all of its siblings are inline or inline-block, just use vertical-align: middle.
Preview: http://jsfiddle.net/Wexcode/KceFF/