vertical-align: middle doesn't work for me? - html

I don't know why the div on the left doesn't align vertically to center.
here is the html:
<body >
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems" >
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain" ></div>
<div id="news" class="bgc-purple divmain"></div>
</div>
</body>
and here is the necessary css:
.bgc-blue{
background-color: #0066ff;
}
.bgc-white{
background-color: whitesmoke;
}
.bgc-purple{
background-color: purple;
}
.bgc-green{
background-color: rgb(70, 223, 70);
}
.vertCenter-flex{
display: flex;
align-content: center;
justify-content: center;
}
.divmain{
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems{
text-align: center;
}
#topH{
width: 100%;
height: 95%;
}
#offers{
width: 40%;
margin-left: 10px;
margin-right: 10px;
}
#profileBox{
width: 30%;
height: fit-content;
}
#news{
width: 25%;
}
and this is the output. Again, i dont know what else can i do to center the left div vertically (#profileBox)


Use align-items: center; on the flex-container for that purpose.
.bgc-blue {
background-color: #0066ff;
}
.bgc-white {
background-color: whitesmoke;
}
.bgc-purple {
background-color: purple;
}
.bgc-green {
background-color: rgb(70, 223, 70);
}
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.divmain {
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems {
text-align: center;
}
#topH {
width: 100%;
height: 95%;
}
#offers {
width: 40%;
margin-left: 10px;
margin-right: 10px;
background: #fa0;
height: 300px;
}
#profileBox {
width: 30%;
height: fit-content;
}
#news {
width: 25%;
background: #0fa;
height: 300px;
}
<body>
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems">
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain">content</div>
<div id="news" class="bgc-purple divmain">content</div>
</div>
</body>


Change your css
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
flex-direction:column;
}

Related

css rearrange the containers [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
Locked. Comments on this question have been disabled, but it is still accepting new answers and other interactions. Learn more.
I want to create something similar to this one:
... and have it in flex, so it will rearrange. I don't know why I can't get to rearrange it to the right side (it overlaps on top of the chart). See the below what I have got:
I would like it to be at the right side, and occupy the rest of the window. How can I arrange this with CSS?
In simple terms, I would like to have the green container to the right side, and when making smaller the navigator, and the green container to flex and go under the red container. I am trying to do this, but for some reason it’s not happening.
I dont uderstand why the right container goes to right side of the first column.
Here’s my snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>

Here is what I changed:
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 35px;
flex: 0 0 6%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
Here's a complete snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 30px;
flex: 0 0 7%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
I hope this helps, the code for you to review in case you have doubts: https://jsfiddle.net/0kqzL6dn/37/

Position divs center verticaly and horizontally

There are a few divs. I want to set width of black as needed and put it on the middle (horizontally) of red. Then put some elements in black in one line and position them on the middle (vertically) of black.
The final result should looks like:
There is a problem with center vertically.
My code is:
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
<style>
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: inline-block;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
</style>
</html>
How is it possible to get this effect?

You can try it like this
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
margin: 0 auto;
justify-content: space-between;
width: min-content;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
margin-right: 5px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
</html>

You can achieve this using flexbox:
#mainContainer {
background: red;
width: 100px;
height: 100px;
text-align: center;
display: flex;
justify-content: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>

This is solved easily with Flexbox.
Change your CSS for #singleOptions as follows.
#singleOptions {
height: 100%;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}

How to align h2 within a nested div?

I'm trying to align the text within my h2 element. I would like it to be centered vertically within the div. I'm working in .NET MVC
My html: (this is the only part giving me trouble)
Specifically:
.banner-side-container {
height: 240px;
width: 180px;
vertical-align: middle;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I've tried adding vertical-align: middle; to all 4 selectors with no success.
Further info: the text-align: center; worked perfectly.

You can use flex and add the following settings to the three elements wrapping the h2s and their parent elements as follows:
display: flex;
flex-direction: column;
justify-content: center;
.banner-side-container {
height: 240px;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>

Table design in css flexbox layout module

I am try to write markup and css for table based design in flexbox module !
Here is the Design
Here is the Markup
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flextable-content div {
width: 20%;
text-align: center;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
#dates {
text-align: left;
display: inline-block;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="text-left">
<div>Business</div><br/>
<div id="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>
I'm stack at date alignment and bottom border as per design which I put on top !

You can simplify your code like below and use a simple gradient for the line:
* {
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header,
.flextable-content{
background: #f7f7f7;
display: flex;
align-items: center;
height: 45px;
}
.flextable-header > span:first-child {
min-width:130px;
text-align:center;
}
.flextable-header .amount,
.flextable-content .money{
margin-left:auto;
padding-right: 30px;
}
.flextable-content {
height: 100px;
background:linear-gradient(grey,grey) bottom right/calc(100% - 130px) 1px no-repeat;
padding-bottom:10px;
margin:10px 0;
}
.flextable-content:last-child {
background:none;
}
.flextable-content > img {
max-width:120px;
border-radius: 5px;
}
.text-left {
padding-left:10px;
font-size: 15px;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="flextable-content">
<img src="https://i.imgur.com/VzV3NwJ.jpg" alt="">
<div class="text-left">
<div>Business</div>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>

Add width: 100% to your dates (use it as class, not id, id should be unique)
Add a spacer div at the bottom.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flextable-content div {
width: 20%;
text-align: center;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
div.dates {
text-align: left;
display: inline-block;
width: 100%;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
.spacer{
height: 1px;
background-color: #e5e5e5;
width: 78%;
float: right;
margin-right: 2%;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="text-left">
<div>Business</div><br/>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
<div class="spacer"></div>
</div>
And to give some rest for other users, you can also change your HTML structure and use a border as a separator
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-area {
margin: 50px auto;
max-width: 800px;
}
.flextable-header {
width: 100%;
background: #f7f7f7;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
}
.flextable-header span {
width: 20%;
text-align: center;
}
.flextable-header .amount {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content {
height: 100px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.img-container {
flex-basis: 20%;
flex-shrink: 0;
flex-grow: 0;
text-align: center;
}
.border-container{
flex-basis: 78%;
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
border-bottom: 1px solid #e5e5e5;
margin-right: 2%;
padding-bottom: 15px;
height: 100%;
}
.text-left {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 15px;
height: 100%;
}
div.dates {
text-align: left;
display: inline-block;
width: 100%;
}
.flextable-content .money {
flex: auto;
text-align: right;
padding-right: 30px;
}
.flextable-content div img {
width: 120px;
height: 80px;
border-radius: 5px;
object-fit: cover;
object-position: center;
}
<div class="header-area">
<div class="flextable-header">
<span>Photos</span>
<span>Date</span>
<span class="amount">Amount</span>
</div>
<div class="flextable-content">
<div class="img-container"><img src="https://i.imgur.com/VzV3NwJ.jpg" alt=""></div>
<div class="border-container">
<div class="text-left">
<div>Business</div><br/>
<div class="dates">25 December 2019</div>
</div>
<div class="money">3500 <small>Taka</small></div>
</div>
</div>
</div>

Keeping P Element Inside A Div

I would like to make this div responsive and keep the text in the center of it the entire time. As of now, it looks fine on mobile since I added media queries to it, but on desktop the p element in my .info-p-div goes into the div below and looks awful. These divs are side-by-side on the page. I will post my HTML and CSS code relating to this section of the page so you can see what I mean.
HTML
<div class="info">
<div class="info-img-div">
<img src="images/owner.jpg" />
<p><font color="#F5F5F5">Text here</font></p>
</div>
<div class="info-p-div">
<p><font color="#F5F5F5">Text here</font></p>
</div>
</div>
<div class="parallax-3"></div>
CSS
.info {
text-align: center;
min-height: 250px;
width: 100%;
background-color: #000;
}
.info-img-div {
position: left;
width: 35%;
border-right-style: solid;
border-color: #F5F5F5;
}
.info-img-div img {
border-radius: 50%;
height: 25%;
width: 25%;
min-height: 100px;
min-width: 100px;
margin-top: 20px;
}
.info-p-div {
height: 25%;
width: 50%;
max-width: 65%;
text-align: center;
position: relative;
float: right;
font-size: 12px;
word-wrap: break-word;
vertical-align: middle;
}
.parallax-3 {
background-image: url("images/background3.jpg");
height: 400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#media only screen and (max-width: 600px) {
.info {
text-align: center;
float: none;
height: 50%;
}
.info-img-div {
float: none;
border-right-style: none;
position: relative;
width: 100%;
}
.info-p-div {
float: none;
text-align: center;
width: 100%;
max-width: 100%;
}
}

I think you are looking for below solution.
I posted an working example.
.box {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
width: 100%;
height: 300px;
background: tomato;
}
.box p {
flex: 1 0 0;
text-align: center;
}
#media screen and (max-width:600px) {
.box {
flex-direction: column;
}
.box p {
display: flex;
justify-content: center;
align-items: center;
}
}
<div class="box">
<p>One</p>
<p>Two</p>
</div>