Attempting to left-align text to center
I am trying to achieve what you see at the bottom of the panel in the image below. Each of the three elements is centered, but the text is aligned to the left.
I have developed the following basic CSS and HTML code. I try to use flexbox as much as possible for a responsive layout. Anyone have a clean HTML / CSS solution?
I understand that the tag p
is a block level element. So what are my options without setting the tag width p
? Or maybe there is another tag that I could use?
The HTML and CSS below has only a basic structure.
.panel {
display: flex;
border: 1px solid black;
min-height: 300px;
flex-direction: column;
max-width: 500px;
}
.panel-body {
display: flex;
flex: 1;
flex-flow: row wrap;
justify-content: center;
}
.panel-heading {
padding: 10px 10px;
}
.panel-body div.chart {
flex: 0 0 100%;
min-height: 150px;
background-color: green;
}
.panel-body div {
text-align: center;
flex: auto;
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-around;
}
p {
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div>
<p>HIGH
<br/>144</p>
</div>
<div>MEDIUM
<br/>2</div>
<div>LOW
<br/>3</div>
</div>
</div>
source to share
Just changed the styles .panel-body div
. Also there is no need for a tag here p
, consider removing it from your markup. Demo video:
.panel {
display: flex;
border: 1px solid black;
min-height: 300px;
flex-direction: column;
max-width: 500px;
}
.panel-body {
display: flex;
flex: 1;
flex-flow: row wrap;
justify-content: center;
}
.panel-heading {
padding: 10px 10px;
}
.panel-body div.chart {
flex: 0 0 100%;
min-height: 150px;
background-color: green;
}
.panel-body div {
/* Take 33.33% width, allow grow and shrink */
flex: 1 1 33.33%;
background-color: red;
/* become a flex-container */
display: flex;
/* align flex-items vertically */
flex-direction: column;
/* center vertically */
justify-content: center;
/* center horizontally */
align-items: center;
}
p {
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div>
<p>HIGH
<br/>144</p>
</div>
<div>MEDIUM
<br/>2</div>
<div>LOW
<br/>3</div>
</div>
</div>
source to share
Try this HTML code:
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div><p>HIGH<br/>144</p></div>
<div><p>MEDIUM<br/>2</p></div>
<div><p>LOW<br/>3</p></div>
</div>
</div>
It looks like you originally only put the div containing "HIGH" and "144" in a tag <p>
which, according to your css code, is an attribute that has a style that has left aligned text. However, the content inside the other 2 was <div>
not wrapped in a tag <p>
, and so they were not written in style.
source to share