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
Related
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 1 year ago.
I have 3 divs, I want to keep those side by side but if the text inside each div goes long, break the text to a new line and keep the next div beside that.
<div style="float: left;">this is a text</div>
<div style="float: left; text-decoration: underline;">Will continue in next div</div>
<div style="float: left;">and this will be beside that</div>
I want to show above divs like this (the second div should have underline)
this is a text that will continue
in next div and this will be beside
that
By default, a div element has a display attribute value of block which will place it on its own line in the document. If you want them to be side-by-side, you can set the value to inline or inline-block (if you want to set a width/height).
div {
font-size: 4rem;
display: inline;
}
#second {
text-decoration: underline;
}
<div>This text is in the first div element and</div>
<div id="second">continues into the second div element and</div>
<div>finishes in the third div element.</div>
If all you need the separate elements for is to underline the text in the second div, then I'd suggest you use a span instead to avoid the headache of removing styles from the divs and remembering to exclude them from any future CSS selectors.
div {
font-size: 4rem;
}
.underline-me {
text-decoration: underline;
}
<div>This text is all in one div element <span class="underline-me">even though this part is underlined</span> so it will flow without needing to change the display property</div>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
try this and check this fiddle
.box {
width: 40%;
margin-left: auto;
}
I'm not 100% on what you are asking for, but here is a JSFiddle using p elements inside of one div.
https://jsfiddle.net/3ct2syhp/
CSS
.box {
display: inline-block;
margin-left: 50%;
}
HTML
<div>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p class="box">
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
</div>
The elegant way:
div {display: table; margin-left: auto; text-align: left;}
So I have some generated html that I am attempting to style. The html seems fairly normal to me, and the css I am trying to apply is minimal, but it is acting in a way that I would not expect.
The html places a div with an anchor tag, containing both an img and some text inside the div, wrapped (for some reason) in a span.
div {
border: 1px solid black;
height: 40px;
}
.title img {
height: 100%
}
<div>
<span class="title ">
<a href="http://www.google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Commons_app_72_72px.png">
<span>Sample Text</span>
</a>
</span>
</div>
As you can see, the link text is outside the border of the div.
If I get rid of the image, the text is aligned properly, but adding the img seems to stretch the containing span outside the borders of the div its supposedly contained in, despite the fact that the img is not any bigger than the div and does not stretch to the new size of the span. It almost looks like the img and span inside the anchor are not aligned and the span is stretching to allow them to be weirdly offset.
The weird nesting of the div and span with class title is not something I have control over, so if the solution to my problem requires changing that, please explain why.
How do I get rid of this weird behavior?
An image, which is an inline element by default, is provided space underneath for descenders.
One way to resolve the issue is with vertical-align.
So instead of:
.title img {
height: 100%;
}
Try:
.title img {
height: 100%;
vertical-align: bottom;
}
DEMO
Learn more about descenders here:
Mystery white space underneath image tag
Why is my textarea higher up than it's neighbor?
Just add vertical-align: middle for image:
.title img {
height: 100%;
vertical-align: middle;
}
If you want to align text by top boundary than set vertical-align to top.
Images are inline element. By default strings are aligned to the baseline. Since image larger than text line height, text is aligned to the lower boundary.
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
I have this code:
<div id="one">
<div id="two">my text here</div>
</div>
I have styled the div with id=two and put a box around it. The problem is that it doesn't enclose the text but instead expands to the width of the outer DIV. Is there a way I can make it just size to match the text without specifying width?
You can either
#two {
display: inline; /* or 'inline-block' */
}
Or:
#two {
float: left; /* or right */
}
display: inline; stops the div being displayed as a block-level element, causing it to collapse (for want of a better word) to the size of its contents. If you use the alternative display: inline-block then the div retains its ability to have a defined width and height, which may be required for your layout. However it's worth noting that Internet Explorer 6 and 7 only accepts display: inline-block for those elements that are 'naturally inline.'
float has much the same effect; but using float might/will obviously affect the layout of the page, and may need to be cleared by subsequent elements.
display:inline-block;
This way you keep the block behaviour of your div.