Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to align an indented line in a span that wraps into multiple lines?

Tags:

html

css

Does anyone have an idea how to align the second line?

alt text

span.info {    margin-left: 10px;    color: #b1b1b1;    font-size: 11px;    font-style: italic;    font-weight: bold;  }
<span class="info"></span>
like image 339
UpCat Avatar asked Jan 13 '11 08:01

UpCat

People also ask

How do you break a span into two lines?

span is an inline element, as such styling attributes such as width or margin don't work. You can fix that by either changing the span to a block element (such as div ), or by using padding instead.

How do you align items in a span?

To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .

Does text-align work on span?

Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.

1 Answers

display:block;

then you've got a block element and the margin is added to all lines.

While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. This answer is inteded for those.

like image 156
choise Avatar answered Sep 29 '22 08:09

choise
Sign in to Comment

Related questions

Transition color fade on hover?
how to overwrite css style
How to force a fixed column width with a Bootstrap grid and keep the other ones fluid
Angular 2 - Global CSS file
Make an image to fit its parent dimensions
How to position two divs horizontally within another div
CSS: Creating textured backgrounds
Pure CSS animation visibility with delay
Website elements and fonts are too small in mobile devices
Size of HTML5 Canvas via CSS versus element attributes
Remove space (gaps) between multiple lines of flex items when they wrap
create a white rgba / CSS3
Getting rid of the blue focus rectangle on input boxes in HTML/CSS?
Disable or reset a CSS rule
Bootstrap dropdowns menus appearing behind other elements - IE7
CSS media queries for screen sizes
flex-wrap not working as expected in Safari
JavaScript setting pointer-events
Jquery $('#div').show().delay(5000).hide(); doesn't work
input type=submit text vertical alignment in Firefox

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!