I'm trying to modify an existing component which inherits the Flexbox concept.
Currently it looks like this:
Now what I'm trying to achieve is regardless of content size inside the box:
The box will have the same height - aligned to each other
The button will stay at the bottom even if the top contents are long.
Here is the existing structure that I'm trying to fix:
<section class="container counsellor-list">
<div class="row">
<div class="col-12 col-sm-12 col-lg-6 col-xl-4 mb-30 counsellor-list-item">
<div class="state_chosen">
<img class="img-fluid" src="https://st.depositphotos.com/1771835/1477/i/950/depositphotos_14779771-stock-photo-portrait-of-confident-young-doctor.jpg" />
<div class="bg-blue20 p-30 counsellor-list-item-content">
<div class="text-coral subtitle-small text-bold text-uppercase mb-24 d-flex flex-wrap">
<span class="">
Wien
</span>
<span class="ml-16">
St. Polten
</span>
<span class="ml-auto language">
<span>
DE
<span> | </span>
EN
</span>
</span>
</div>
<h2 class="mb-24">Jan Faustio</h2>
<div class="">
<a class="btn btn-coral" href="#"> Button </a>
</div>
</div>
</div>
</div>
...
</section>
Codepen link
I tried a lot of stuff but didn't work as I'm expecting it to be/result.
Check this, I hope I understood what you want to achieve https://codepen.io/IvanBisultanov/pen/PoQmXqX
I also added .btn-wrap classname, and wrapped all HTML above in div
.counsellor-list-item-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.btn-wrap {
margin-top: auto;
}
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've tried col-centered class, margin:0 auto, but I need to see the width of the containing div to a set pixel width...I don't want that....has to be responsive also.
The pen is here:
http://codepen.io/Satearn/pen/WpzJYy
.center-portfolio
{
margin:0 auto;
padding-left:20px;
width:800px;
}
In this case you could add text-align: center; to .center-portfolio and add .center-portfolio > p { display: inline-block;}. But you would have to add additional margin-top to .center-portfolio
View on Codepen
You can check https://css-tricks.com/centering-css-complete-guide/ for more info on centering things in CSS, very cool article.
P.S. You might want to change the width to max-width
APPLY THE CSS
.glyphicon.glyphicon-print ,
.glyphicon.glyphicon-globe ,
.glyphicon.glyphicon-tag ,
.glyphicon.glyphicon-plus-sign ,
.glyphicon.glyphicon-tint
{
font-size: 5vw;
color:#88BA00;
}
.center-portfolio
{
margin:0 auto;
display:block;
padding-left:20px;
text-align:center;
}
p
{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="center-portfolio">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>
Try This HTML5 markup for Bootstrap based coding
.glyphicon.glyphicon-print,
.glyphicon.glyphicon-globe,
.glyphicon.glyphicon-tag,
.glyphicon.glyphicon-plus-sign,
.glyphicon.glyphicon-tint {
font-size: 5vw;
float: left;
color: #88BA00;
}
.center-portfolio {
margin: 0 auto;
padding-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="center-portfolio">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>
</div>
</div>
</div>
In the theme that I use, there is a shortcode making googd accordians. I am making the site RTL. Accordian's title and content have been RTL. But the plus sign (the square) does not follow the CSS rules added. I was wondering if anyone could help me make the plus sign RTL.
Page URL: http://sciself.com/?page_id=4766
HTML code is as follows,
<div id="text-13" class="widget widget_text">
<div class="textwidget">
<div class="accordian">
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
</div>
</div>
</div>
and CSS rules added are,
#text-13 .textwidget .accordian .toggle-content {
font-family: bkoodak !important;
direction: rtl !important;
text-align: justify !important;
}
#text-13 .textwidget .accordian h5.toggle a {
font-family: bkoodak !important;
direction: rtl !important;
float: right !important;
}
in the .arrow class in the line "2073" in your style.css add property like so:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-right:0;
margin-left:17px;
}
also your form need to be rtl, in the .gform_fields class add this property:
.gform_fields{
direction:rtl;
text-align:right;
}
موفق باشید :)
Try this:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-left:10px;
font-family:bkoodak;
}
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>