Html middle line text

CSS Text Alignment

In this chapter you will learn about the following properties:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

When the text-align property is set to «justify», each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Example

Text Align Last

The text-align-last property specifies how to align the last line of a text.

Example

Align the last line of text in three

elements:

Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element:

Example

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

Example

Set the vertical alignment of an image in a text:

img.a <
vertical-align: baseline;
>

img.b vertical-align: text-top;
>

img.c vertical-align: text-bottom;
>

The CSS Text Alignment/Direction Properties

Property	Description
direction	Specifies the text direction/writing direction
text-align	Specifies the horizontal alignment of text
text-align-last	Specifies how to align the last line of a text
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element

Источник

How to create a horizontal line with text in the middle using Css

In this tutorial, we willing learn about how to create a horizontal line with some text in the middle using css.

Let’s start with an Html markup.

div class="separator"> div class="line">div> h2>Top Coursesh2> div class="line">div>div>

In the above markup, we have a div element with separator class inside that we have two div elements with line class and h2 element with text.

We are using the css flex-box, to create a horizontal line with a text is placed in the middle.

.separator display: flex; align-items: center; > .separator h2 padding: 0 2rem; /* creates the space */ > .separator .line flex: 1; height: 3px; background-color: #000; >

In the above code, we have used the flex-box in .sperator class, so that it creates a flex-container and aligns all three elements horizontally.

The align-items: center property aligns the elements vertically center.

Inside the .line class we have used flex:1 and height: 3px , so that it creates the flexible horizontal lines with 3px of height.

Here is the output in codepen.

Источник

CSS create a vertical line with a text in the middle

The following tutorial shows you how to use CSS to do «CSS create a vertical line with a text in the middle».

CSS Style

The CSS style to do «CSS create a vertical line with a text in the middle» is

.wrapper !-- w w w. d e m o 2 s . c om --> position:relative; width:250px; height:300px; border:1px dashed #ccc; margin:10px; > .line < position:absolute; left:49%; top:0; bottom:0; width:1px; background:#ccc; z-index:1; > .wordwrapper < text-align:center; height:12px; position:absolute; left:0; right:0; top:50%; margin-top:-12px; z-index:2; > .word < color:#ccc; text-transform:uppercase; letter-spacing:1px; padding:3px; font:bold 12px arial,sans-serif; background:#fff; >

HTML Body

body> div >"wrapper"> div >"line">  div >"wordwrapper"> div >"word"> or    

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .wrapper !-- w w w . d e m o 2 s . c o m --> position: relative; width: 250px; height: 300px; border: 1px dashed #ccc; margin: 10px; > .line < position: absolute; left: 49%; top: 0; bottom: 0; width: 1px; background: #ccc; z-index: 1; > .wordwrapper < text-align: center; height: 12px; position: absolute; left: 0; right: 0; top: 50%; margin-top: -12px; z-index: 2; > .word < color: #ccc; text-transform: uppercase; letter-spacing: 1px; padding: 3px; font: bold 12px arial,sans-serif; background: #fff; >  body> div >"wrapper"> div >"line">  div >"wordwrapper"> div >"word">or     

Related

• CSS center text within a line
• CSS closing text content with stripe at of end line text every inside element
• CSS create a line break instead of having text going on top of itself
• CSS create a vertical line with a text in the middle
• CSS display custom text in a new line
• CSS display custom text in a new line (Demo 2)
• CSS display custom text in a new line (Demo 3)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

How to Add Horizontal Lines Before and After a Text in HTML

This article will guide you on how to add a horizontal line to the right and left side of a text as shown below:

1. Create an HTML text tag.

In your HTML file create an h2 tag and give it a class name of hr-lines

2. Adding the Left Line

We’ll make use of the CSS :before pseudo-element to add a line to the left side of the text. Apply the code below to your CSS file:

.hr-lines:before< content:" "; display: block; height: 2px; width: 130px; position: absolute; top: 50%; left: 0; background: red; > 

From the above code, we’re creating a new element with a height of 2px and width of 130px before the hr-lines element using the content property, then giving it an absolute position in order to move it around, we set the top to 50% to make it align with the text at the middle.

3. Set the hr-lines to relative

For the pseudo-elements to be applied to the target element, we must set the position of the element to a relative, this will make all the movement of the :before and :after be relative to the parent (text).

Add the following lines to your CSS files.

We can fix this by setting the max-width and adding margin to the element.

.hr-lines< position: relative; /* new lines */ max-width: 500px; margin: 100px auto; text-align: center; > 

We’re setting the :before to the left side of the text by setting the left:0 .

4. Adding the Right Line

We’ll make use of the :after pseudo-element to add the right line.

Add the following lines of code to your CSS file to add the right line to the text.

.hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > 

We’re setting the :after to the right side of the text by setting the right:0 .

Final Output:

The Complete Code

h2 class="hr-lines"> PEACE /h2> section> div> p>I wish for peace in Russia & Ukraine/p> /div> section> 

.hr-lines< position: relative; max-width: 500px; margin: 100px auto; text-align: center; > .hr-lines:before< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; left: 0; > .hr-lines:after< content:" "; height: 2px; width: 130px; background: red; display: block; position: absolute; top: 50%; right: 0; > p< text-transform: uppercase; color: red; > section< display: flex; justify-content: center; align-items:center; gap: 1rem; > div< width: 500px; border: 1px solid #ccc; padding: 10px; height: 100px; display: flex; justify-content: center; align-items: center; line-height: 1.4; > 

Wrapping Up

I hope that this article will assist you in creating a text with horizontal right and left lines at some point in the future.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

See you in the next article. Bye Bye 🙋‍♂️

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.

Did you find this article valuable?

Support Ayodele Samuel Adebayo by becoming a sponsor. Any amount is appreciated!

Источник

Align Text Vertically in CSS

1. Use the line-height Property to Align Text Vertically in CSS
2. Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS
3. Use flexbox to Align Text Vertically in CSS

We will introduce three methods of vertically aligning a text in CSS.

Use the line-height Property to Align Text Vertically in CSS

If we have single-line text, we can use the line-height property to align the text vertically within a div . The line-height CSS property sets the height of a line box. It is used to set the distance between lines of text. However, we can also use it to align our one-line text vertically. This technique will not work if the text has line breaks or is of more than one line. We can give line-height any value according to our requirement on where we want to align the text vertically.

For example, create a div and write a one-line text inside it. Let us give the div a class name of center . Write a one-line text Vertically aligned inside the div . Give the div a height of 100px and line-height of 100px to vertically align the text to the center of the div. Lastly, give the div a border of 1px solid black to see the vertical alignment.

The example below shows that the text is aligned vertically to the center of the div containing height of 100 px and border of 1px solid black using CSS line-height property.

div class="center"> Vertically aligned div> 

.center   height : 100px;  line-height : 100px;  border : 1px solid black; > 

Use span Inside a div Along With the line-height Property to Align Text Vertically in CSS

We can also align multiple numbers of lines vertically using the line-height property. We can place a span tag inside a div tag and put multiple lines inside the span tag. We can use the br tag to break the line and make it a multiple-line text. Then we can use the line-height property for both div and span . We will also use the display: inline-block CSS property for the span tag to wrap multiple lines of code together. Therefore we also have to use the line-height CSS property inside span to separate multiple-line text from one another.

For example, create a div and then a span inside the div . Write multiple lines of text inside that span with the help of br tag. In CSS select the div and give the height of 100px and set line-height to 100px . Set the div border of 1px solid black to see the alignment. Set the display property of the span tag to inline-block to wrap multiple lines of text together. Give line-height to 20px to the span to give a gap between multiple lines of text. Keep the vertical-align to middle to vertically place the text exactly in the middle.

The example below shows the vertical alignment of multiple lines of text within a div with the help of line-height and display: inline-block property.

div>  span>  Multiple br> line br> code  span>  div> 

div  height : 100px;  line-height: 100px;  border : 1px solid black > span   display : inline-block;  vertical-align : middle;  line-height : 20px; > 

Use flexbox to Align Text Vertically in CSS

We can also use flexbox to align a text within a div vertically or horizontally. We can use flexbox by setting the display property to flex . After setting the display property to flex , we can use align-items property and put its value as center to align a text vertically within a div . We can use the justify-content property and set it to center to center the text within a div horizontally. Flexboxes are very easy to use, and they are very effective as well.

For example, create a div and write single or multiple lines of text inside it. Use the br tag to make multiple lines of text. Give a height of 100px to the div . Set the border as 1px solid black to see the alignment. Put the value of the display property as flex to use flexbox . Then, set the align-items to center to align the text vertically within the div to the center. We can also align the text horizontally by putting the value of justify-content to center .

Thus, we can use flexbox to align the text horizontally and vertically in CSS.

div>  Align br> Text to br> Center div> 

div   height : 100px;  border : 1px solid black;  display : flex;  align-items : center;  justify-content : center; > 

Источник