The image is an example of text float:left.
How can I get the text to line up vertically like that but have it in the center of the page (not flush left)?
<span class="new"> TITLE</span></br>
<span class="new">
1. Text text text text text text</br>
2. Text text text text text text text text text text</br>
3. Text text text text text text</br>
4. Text text text text text text text text text text text</br>
5. Text text text text text text</br></br>
</div>
I use the “document definition list” because it is easy (although not semantic for the purists :).
An ID can be applied to the DL block and CSS applied to the DL and DD tags. Browser default margins and padding are usually adequate and do not require changing.
Source and demo available there:
Thanks, but how to get the dl in the center of the page?
I put it inside a div and set the div width to 88%, margin 0 auto and text align center
DL set to display inline_block and text align left.
Edit:
Also recommended to temporarily set contrasting background colors to div, dL, dt, dd.
Thanks for your help. I tried this:
.new-box {
margin: auto;
background:#fff;
width: 500px;
padding: 10px;
}
dl{
display inline_block;
text align: left;
width: 40%;
margin: 0 auto;
}
<div class="new-box">
<dl>
<span class="new"> TITLE</span></br>
<span class="new">
1. Text text text text text text</br>
2. Text text text text text text text text text text</br>
3. Text text text text text text</br>
4. Text text text text text text text text text text text</br>
5. Text text text text text text</br></br>
</dl>
</div>
The list lined-up vertically thanks, but it didn’t center on the page until I gave it a width:40%, not sure why. Also, the text wraps. Any way to remedy the wrapping?
I look forward to any help.
Try the free w3.org validation tool.
The DL Is a block, similar to a table and only allows DT and DD tags.
The .newbox tag has a hard coded 500px value which will prevent the mobile version being responsive. Try 88% and max-width 500px instead.
Also add text-align center to .newbox tag which will apply to the DL inline block.
Add DT and DD tags to DL and set contrasting background colors.
When I am back on the desktop I will give an example… unless someone else is so kind 
<?php declare(strict_types=1);
?><!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title goes here </title>
<style>
body {background-color: #ffe; color: #333;}
.new-box {
margin: 1em auto;
background: #fff;
width: 88%; max-width: 30em;
}
#center dl {
display: inline-block;
text-align: left;
width: 40%;
margin: 0 auto;
background-color: #ddd;
}
#center dt {
font-weight: 700;
background-color: lime;
}
#center dd {
background-color: aqua;
}
#center dd ol li {
font-style: italic;
}
</style>
</head>
<body>
<div class="new-box">
<dl id="center">
<dt> TITLE </dt>
<dd>
<ol>
<li> Text text text text text text </li>
<li> Text text text text text text text text text text </li>
<li> Text text text text text text </li>
<li> Text text text text text text text text text text text </li>
<li> Text text text text text text </li>
</ol>
</dd>
</dl>
</div>
</body></html>
https://validator.w3.org/nu/#textarea
I would argue against using elements based on appearances and use CSS to make more appropriate elements display as desired.
The effect can be achieved this way with less code and better semantics.
Semantics would depend upon context of the content, which we are not party to, so only a best guess can be made.
.new {
display: table;
margin: 0 auto;
}
The display table will shrink-wrap the element width to the content width, without any need to set an explicit width.
The margin auto will centre the reduced width element in its container.
This should work on whatever appropriate element you choose for the content.
Added @SamA74’s version and CSS Three Letter Acronynyms to highlight dimensions:
<?php declare(strict_types=1);
?><!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> title goes here </title>
<style>
body {background-color: #ffe; color: #333;}
/* Three Letter Acronyms - TLA */
.bga {background-color: aqua;}
.bgl {background-color: lime;}
.bgy {background-color: silver;}
.bd3 {border: solid 3px red;}
/* @John_Betong */
.new-box {
margin: 2em auto;
text-align: center;
}
.new-box dl {
display: inline-block;
text-align: left;
}
/* @SamA74 */
.new {
display: table;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="new-box bd3 bgy">
<dl class="bga">
<dt> @John_Betong </dt>
<dd>
<ol class="bgl">
<li> Text text text text text text </li>
<li> Text text text text text text text text text text </li>
<li> Text text text text text text </li>
<li> Text text text text text text text text text text text </li>
<li> Text text text text text text </li>
</ol>
</dd>
</dl>
</div>
<hr>
<h1> @SamA74 </h1>
<ol class="new bgl">
<li> Text text text text text text </li>
<li> Text text text text text text text text text text </li>
<li> Text text text text text text </li>
<li> Text text text text text text text text text text text </li>
<li> Text text text text text text </li>
</ol>
<h2>
<a
href="https://www.sitepoint.com/community/t/how-to-have-text-line-up-in-a-column-in-page-center/362611?u=sama74">
SitePoint Forum
</a>
</h2>
</body></html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
