Align an image next to a paragraph - html

Question

I am trying to get to perfectly align a paragraph next to a text but I am struggling, can anyone help? Here is what I have:
#aboutme {
padding: 50px;
}
#aboutme img {
border-radius: 50%;
width: 150px;
vertical-align: middle;
}
#aboutme p {
font-size: 16px;
display: table-cell;
color: #212529;
}
.intro_link {
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover {
color: red;
}
<section id="aboutme">
<div class="container">
<img src="./img/face.png">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio, my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year
old student studying at Concordia University in Montreal. Currently, I am in my 2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience has been wonderful. I meet great people that share similar interests, my
network is growing day-by-day and I learn things that interest me. The ultimate goal right now is to graduate and this website will be used to explore everything I learn as I go. For my school assignments and personal projects, you can find them
in the portfolio section. If you are ever interested in checking out my other social etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>
I would like to nicely align the paragraph and the image to make it nice and central but I am struggling to understand the properties, I started learning HTML & CSS yesterday

Answer 1

#aboutme{
padding: 50px;
}
#aboutme img{
border-radius: 50%;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
/*#aboutme p{
font-size: 16px;
display: table-cell;
color: #212529;
}*/
.intro_link{
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover{
color: red;
}
<section id="aboutme">
<div class="container">
<img src="https://vignette.wikia.nocookie.net/fan-fiction-library/images/1/15/Admin.png/revision/latest?cb=20140917130743">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio,
my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
and I learn things that interest me. The ultimate goal right now is to graduate and this website will
be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
them in the portfolio section. If you are ever interested in checking out my other social
etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>

Answer 2

You can use flex to achieve this
Set display: flex to .container
Use align-items: start in .container so that the image will not
get stretched
Add margin-right to #aboutme img for spacing between image and
paragraph
#aboutme{
padding: 50px;
}
#aboutme img{
border-radius: 50%;
width: 150px;
vertical-align: middle;
margin-right: 10px;
}
#aboutme p{
font-size: 16px;
display: table-cell;
color: #212529;
}
.intro_link{
text-decoration: none;
color: #4a69bd;
}
.intro_link:hover{
color: red;
}
.container {
display: flex;
align-items: start;
}
<section id="aboutme">
<div class="container">
<img src="http://via.placeholder.com/500x500">
<p>Welcome to my personal website! In here, you will find out everything about me. You can scroll down to discover more about my portfolio,
my weekly activities or ways to contact me. Before doing so, I shall briefly introduce myself! I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
and I learn things that interest me. The ultimate goal right now is to graduate and this website will
be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
them in the portfolio section. If you are ever interested in checking out my other social
etworks (GitHub, LinkedIn, etc...) or to contact me, you can go to the contacts section.
</p>
</div>
</section>