I have the following html-code:
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
My problem is that sometimes the text is wrapped before €, so I get:
My really super product 19,99
€
I would prefer:
My really super product
19,99 €
The problem is: I only could add an additional tag arround this code but couldn't change the code itself (because it's generated by a 3rd-party-tool). Okay, it would be possible somehow replaceing the output, but the real code is more complicated than this example.
So is it possible to prevent the wrap between price and currency only by CSS?
Added: Sorry, I forgot to mention. It should be possible to get
My really super product 19,99 €
in one line as well if there is enough space in width.
Maybe something like this will suit
Variant 1
.wrapper {
position: relative;
}
.wrapper .price {
padding-right: 20px;
}
.wrapper .currency {
position: absolute;
margin-left: -15px;
}
<div class="wrapper">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 200px; background-color: yellow;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 155px; background-color: #0f0;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 140px; background-color: #99f;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
Here .wrapper is not really necessary. In most cases you may add the style just for .price and .currency. Try to inject the solution into you layout and review.
Variant 2
.price {
padding-right: 1em;
}
.currency {
margin-left: -1em;
}
<div>
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div style="width: 200px; background-color: yellow;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div style="width: 155px; background-color: #0f0;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 140px; background-color: #99f;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
U have to use <br/> may this will help you to add the data like that
<span=class="">
My really super product</Span><br/>
<spa="">19,99</span><span="">$</span>
Related
I have markup that puts anchors (for help icons) right after <label/> elements. If the label and icon would fix on one line, everything works how I want. However, if the label causes the text to wrap (due to length), then the icon creates a line feed and renders itself on a new line. I want the icon to simply appear 'after' the label on the same line no matter how many lines the label takes.
This is the result of the rendering (in case screen sizes aren't right - note, I don't know why Font Awesome isn't working in the fiddle, but you can still see the issue):
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
HTML
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Here is the fiddle: https://jsfiddle.net/8x2na97d/
Add the anchor tags inside label.
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</label>
Solution : https://jsfiddle.net/hqx5wjop/1/
It happens because label is displayed as an inline-block and anchor tag is displayed as inline
You can also solve it by adding the style
display: inline;
to label tag
Set this CSS:
label{
display: inline;
}
Try This code label{display:inline;}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
label{
display:inline;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 ffddff</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps</label>
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
I think this code will help you for label and fa icon in same line,
<style>
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 0px #6c757d;
padding: 10px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a></label>
</div>
<div class="col">
<label class="control-label liMedicare" for="iMedicare">I enrolled in Medicare in 2019 with longer text so that it wraps
<a class="vhiMedicare" style="" role="button" tabindex="0">
<span class="fal fa-question-circle"></span>
</a> </label>
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
</body>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.
Currently they have the following CSS:
.myDiv {
width: calc(100% - 67%);
float: left;
}
What else am I missing to accomplish this?
I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM
This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a cleaned up version from the codepen link:
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>
I need help to show the tool tip relatively with parent element. Refer screen 1 it's show the description is perfect screen 1. But screen 2 Screen 2 when i scroll the section description show the same place but i need relative
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup" style="position: absolute;">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
I think you're looking for something like this, right?
It's better you create a snippet & re-create your issue, so everyone can catch the idea & help you out.
The problem is that you set the element position: absolute, so it just keep the position based on its relative parent. Scrolling won't move it.
This example will help you better in understanding how position works https://codepen.io/AlHakem/pen/YayxBo
.scroller {
max-height: 150px;
overflow-y: scroll;
height: 150px;
float: left;
width: 200px;
}
.item {
position: relative;
}
.temp-description-popup {
visibility: hidden;
height: 0px;
}
.item:hover>.temp-description-popup {
visibility: visible;
height: auto;
padding: 4px;
background-color: #f1f1f1;
border-radius: 4px;
position: absolute;
top: 25px;
z-indeX: 2;
}
<div class="scroller">
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
</div>
I've inline CSS like this. But the float is not working.
<div style='clear:both'>
<div style='display:block;float:right;margin:10px;width:200px'>
<img src = 'http://knowafest.co.in/images/logo.png' height='200px' width='200px'/>
</div>
</div>
I tested code in this page - http://test-knowafest.blogspot.in/2013/03/fuseout-2013-government-engineering.html
You can see the image next to post title. The image is not getting floated. I tried several combinations of paramaters in style, but it is not working. Can you anyone tell me where I went wrong.
It looks like below now
====================================
But I want it like below.
Here is the WORKING SOLUTION
The Code:
<div id="post-body-3682190942132900250" class="post-body entry-content">
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img width="200px" height="200px" src="http://knowafest.co.in/images/logo.png">
</div>
</div>
<div style="display: table-cell;">
<!-- The New Addition is here -->
<div trbidi="on" style="text-align: left;" dir="ltr">
<div style="clear: both; text-align: center;" class="separator"></div>
<span id="fullpost"> This information is brought to you by <a target="_blank" href="http://knowafest.com/">www.knowafest.com</a> </span>
<br>
<hr>
<span id="fullpost"><span style="font-weight: bold;">Event:</span> Fuseout 2013 | Technical Fest
<br>
<br><span style="font-weight: bold;">Fuseout 2013 is Organised by:</span> Government Engineering College, Trivandrum, Kerala
<br>
<br><span style="font-weight: bold;">Fuseout 2013 dates:</span>
<br>Fest dates: 15th-17th March 2013
<br>Last Dates for Registration: Spot Registrations Open
<br>
<br><span style="font-weight: bold;"> Details:</span>
<br>Fuseout Is A Technical Fest Organised By The Electrical And Electronics Department Students Of Govt Engineering College Barton Hill ,Trivandrum As Part Of AAGNEYA'13 Aiming To Bring Together The Intellectual Minds Of Our Country In A Competition Like None Other.
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Technical Events in Trivandrum :</span>
<br>Robotron
<br>Circuito Metego
<br>Scrap Maniac
<br>Wire-In
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Co-ordinators Details:</span><span style="color: green;"><br>Leo K A<br>9995992755</span>
<br><span style="font-weight: bold;">How to reach Government Engineering College: </span>
<br>At Kanakakunnu Palace Grounds
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Website: </span><a target="_blank" href="http://tinyurl.com/fuseout2">http://tinyurl.com/fuseout2</a>
<br><span style="font-weight: bold;">Fuseout 2013 Facebook Link: </span><a target="_blank" href="http://www.facebook.com/fuseout.aagneya"><img src="http://knowafest.co.in/images/icons/facebook.gif"></a>
<br><span style="font-weight: bold;">Fuseout 2013 Youtube Link: </span><a target="_blank" href="http://www.youtube.com/watch?v=TP4igb1dMdk"><img src="http://knowafest.co.in/images/icons/youtube.gif"></a>
<br>
<br>
<br><span style="font-weight: bold;">Fuseout 2013 Event Departments: </span>CSE, ECE, IT, EEE, Instrumentation, Mechanical, Energy, Arts</span>
</div>
</div>
<div style="clear: both;"></div>
</div>
I hope this serves your purpose.
You have problem with clear: both following you floating content:
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
Please remove it to get it worked as you wish (I hope).
<div style="clear: both; overflow: hidden; display: inline; background: none repeat scroll 0% 0% red;">
<div style="float:right;margin:10px;width:200px">
<img height="200px" src="http://knowafest.co.in/images/logo.png" width="200px">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="text-align: center;">
</div>
*strong text*Maybe this is something that you want.
DEMO
You need to use the float:right style only on you image. Also check where you used the clear:both styling. That will mess with the alignment too.
<img src="http://knowafest.co.in/images/logo.png" width="95" height="84" style="float:right" /> <span id="fullpost">
I want a whole block to be centered in its parent, but I want the contents of the block to be left aligned.
Examples serve best
On this page :
http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d%0a++%2f%2f+%7c%7c++%7c%7c__%0d%0a&type=python
the ascii art should be centered (as it appears) but it should line up and look like "YAML".
Or this :
http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a%3f+%5b+New+York+Yankees%2c%0d%0a++++Atlanta+Braves+%5d%0d%0a%3a+%5b+2001-07-02%2c+2001-08-12%2c%0d%0a++++2001-08-14+%5d%0d%0a
the error message should all line up as it does in a console.
First, create a parent div that centers its child content with text-align: center. Next, create a child div that uses display: inline-block to adapt to the width of its children and text-align: left to make the content it holds align to the left as desired.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>
If you wish to ensure that a long line does not widen everything too much, you may also apply the max-width property (with a value of your choice) to the inner tag:
max-width: 250px;
Reposting the working answer from the other question: How to horizontally center a floating element of a variable width?
Assuming the element which is floated and will be centered is a div with an id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
If I understand you well, you need to use to center a container (or block)
margin-left: auto;
margin-right: auto;
and to left align it's contents:
text-align: left;
I've found the easiest way to centre and left-align text inside a container is the following:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Hope this is what you were looking for as it took me quite a bit of searching just to figure out this pretty basic solution.
Normally you should use margin: 0 auto on the div as mentioned in the other answers, but you'll have to specify a width for the div. If you don't want to specify a width you could either (this is depending on what you're trying to do) use margins, something like margin: 0 200px; , this should make your content seems as if it's centered, you could also see the answer of Leyu to my question
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Is this what you are looking for? Flexbox...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}
<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>
For those of us still working with older browsers, here's some extended backwards compatibility:
<div style="text-align: center;">
<div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
Line 1: Testing<br>
Line 2: More testing<br>
Line 3: Even more testing<br>
</div>
</div>
Partially inspired by this post: https://stackoverflow.com/a/12567422/14999964.
use CSS text-align and display properties to see changes accordingly. Margins are also helpful. For me in the case of SweetAlert to center and align left the following code works. For you may be a different scenario.
.format-pre pre {
font-size: 18px;
text-align: left;
display: inline-block;
}
in ts file
showPasswordHints(){
var message = 'Your password mist contain:<br>'+
'1. At least 8 characters in length<br>'+
'2. At least 3 Lowercase letters<br>'+
'3. At least 1 Uppercase letter<br>'+
'4. At least 1 Numbers<br>'+
'5. At least 1 Special characters<br>'+
'5. Maximum 16 characters in length';
Swal.fire({
html:'<pre>' + message + '</pre>',
customClass: {
popup: 'format-pre'
}
,
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
},
icon: 'info',
confirmButtonText: 'Got it',
confirmButtonColor: '#3f51b5',
});
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I came close to the above acceptable result using grid for each row and width for each column.
This is the raw text:
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
I turned it into a completely centered grid with 3 columns:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Finally, I defined a specified width for each element. This resulted in a centered block with text that is justified left, except for the title:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
.width {
width: 12ch;
}
.title {
text-align: center;
}
span {
border: 1px solid;
}
<span class="grid">
<span class="width title">Title 1</span>
<span class="width title">Title 2</span>
<span class="width title">Title 3</span>
</span>
<span class="grid">
<span class="width">13 characters</span>
<span class="width">18 characters text</span>
<span class="width">5 cha</span>
</span>
<span class="grid">
<span class="width">3 c</span>
<span class="width">9 charact</span>
<span class="width">35 characters text and so on goes a</span>
</span>
<span class="grid">
<span class="width">6 char</span>
<span class="width">12 character</span>
<span class="width">13 characters</span>
</span>
<span class="grid">
<span class="width">7 chara</span>
<span class="width">22 characters text and</span>
<span class="width">15 characters g</span>
</span>
Varying the width for each column (based on a counter of its content, for example), could provide better adjustment for edge cases.
THIS works
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>