Question 42749 in Html Question posted in
Some basic documentation can be found here.

How to position my h1(my name is..) and <p>( A wed…) next to my image, to the right of the image – Html

**I am a beginner in Web dev, and I am trying a small project to apply what I have learnt so far but I have hit a brick wall and feel frustrated and haven’t learned anything. **

I want to position or alight my h1 and p to the right of my image, how do I do that? As well as center my image and text in the middle of the page. I am very confused. I gave in after some time and asked ChatGPT to help, I feel very guilty but I made things worse.
I have learned about flexbox many months ago and forgot it, some of the code here was given by ChatGPT.

I don’t write on Stack Overflow because I am anxious and nervous of people’s judgement. Please forgive me for any mistakes.

Below is my HTML and CSS code. I am still struggling with Bootstrap, so I am not using it in this project.

.my-info {
  display: flex;
  align-items: center;
}

.my-info img {
  border-radius: 50%;
  width: 25%;
  height: auto;
  margin-right: 20px;
}

.my-info div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 44px;
  margin: 0 0 12px;
  text-align: center;
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 36px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

.job {
  font-size: 26px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  margin: 0;
}
<div class="heading">
  <h1>The World of me: Portfolio</h1>
</div>

<div class="my-info">
  <div>
    <img class="me" src="CSS/images/me.jpg" alt="Nevin">
  </div>
  <div class="personal">
    <h1 class="name">My name is <strong>Nevin Dabechuran</strong></h1>
    <p class="job"><em>A Web designer</em></p>
  </div>
</div>

I want it to look something like this:Image with text next to it

Tags:

4

Answers


  1. 0

    first of all, dont be like that. you have two problem, right.

    1.make h1 & p to right of the image. to do that just reorder the html elements:

    <div class="my-info">
    <div class="personal">
        <h1 class="name">My name is <strong>Nevin Dabechuran</strong></h1>
        <p class="job"><em>A Web designer</em></p>
</div>
<div>
        <img class="me" src="CSS/images/me.jpg" alt="Nevin">
</div>

    1. centering them,

       .my-info {
     display: flex;
     justify-content:center;
 }

    thats it ig. just feel free to ask further doubt. after all this place is built up of doubts and questions😂

    Login or Signup to reply.
  2. 0

    you have given image width in % that is why its taking that much space.Also i have added code for aligning the content

    <div class="heading">
  <h1>The World of me: Portfolio</h1>
</div>

<div class="my-info">
  <div>
    <img class="me" src="https://png.pngtree.com/element_pic/17/09/23/fa56a61d288b1922002f4f7edf5ce3e6.jpg" alt="Nevin">
  </div>
  <div class="personal">
    <h1 class="name">My name is <strong>Nevin Dabechuran</strong></h1>
    <p class="job"><em>A Web designer</em></p>
  </div>
</div>

    .my-info {
  display: flex;
  align-items: center;
  justify-content: start;
  
}

.my-info img {
  border-radius: 50%;
  width: 70px;
  height: auto;
  margin-right: 20px;
}

.my-info div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 44px;
  margin: 0 0 12px;
  text-align: center;
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  width: 100vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 36px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
}

.job {
  font-size: 26px;
  font-weight: 400;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  margin: 0;
}
.personal{
  align-items:start;
}
    Login or Signup to reply.
  3. 0

    Your css does position your name and job elements to the right of your image but to shift it to the right of its parent div, use display:block and margin-left:auto. You seem to want a margin right as well so we can set both using margin-inline.

    To center your .my-info div, all you have to do is to shrink it to the width of the content (it’s 100% of the screen width by default so it’s already ‘in the center’ so to speak). We then use margin: auto to apply the same size margin either side.

    Centering things has, historically, been a PITA in web development. Here’s an article from w3c to help you. There’s also a nice utilty called howtocenterincss that you can use to auto generate css to achieve what you’re looking for.

    You’ve also got some superflous css. I’ve commented it out and annotated it to explain how it works.

    Adding a CSS reset to your code is also recommended e.g. adding margin:0 to your body element. It removes some of the unpredicatability from the user agent stylesheet. Here’s a short video from Kevin Powell to explain this (if you don’t follow him already, he’s great for junior devs and people starting out – his courses are worthwhile). Good luck in your career.

    P.S. just comment if you have any questions and I’ll answer them.

    body {
  /* you use this in a few elements so we'll set this as the default in your body, then you only need to add font-family if you need to change away from this */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color:black;
}

* { 
  /* css reset - set margin to 0. It means you can remove margin:0 from your h1 and p classes below */
  margin:0;
}

.my-info {
  display: flex;
  align-items: center;
  /*To center your info container, set the width to shrink to the content and then use margin:auto to add space evenly left and right.*/
  width: fit-content;
  margin:auto;
}

.my-info img {
  border-radius: 50%;
  width: 25%;
  /* height: auto; not needed - height: auto is the default */
  display:block;  /*this allows us to position the image. Setting images to block level elements is recommended imho*/
  margin-inline: auto 20px;
  /*margin-right: 20px; deleted this, already declared in margin-inline */
}

.my-info div {
  /* Not needed - so deleted it my.info h1 already aligns your text in the center so you don't need to do this here. It's already covered
  display: flex;
  flex-direction: column;
  justify-content: center; 
  */
}

/* changed this from h1 to .heading-title and added the class to your html - this is because it's also styling the h1 in your 'my-info' div so we end up styling that one twice */
.heading-title {
  color: #f1efe8;
  font-family: 'Droid serif', serif;
  font-size: 36px;
  line-height: 44px;
  margin: 0 0 12px;
  /* text-align: center; not needed as we've used place-items:center in the .heading div which automatically centers the content */
}

.heading {
  background-image: url("https://mcdn.wallpapersafari.com/medium/50/40/Tnh47t.jpg");
  background-size: cover;
  /*width: 100vw; you don't need this as block level elements are 100% of the width of the viewport by default */
  height: 50vh;
  /*display: flex;
  justify-content: center;
  align-items: center; use grid here, you can save yourself a line of CSS :-) */
  display:grid;
  place-items:center;
}

.name {
  font-size: 36px;
}

.job {
  font-size: 26px;
  text-align: center;
}

.name, .job, .heading-title {
  /* we keep repeating this in your css above. Just declare it in one line so if you need to change it, you only need to change it once */
  font-style: italic;
  font-weight: 400;
}
    <div class="heading">
  <h1 class="heading-title">The World of me: Portfolio</h1>
</div>
<div class="my-info">
  <div>
    <img class="me" src="https://picsum.photos/id/433/200/200" alt="Nevin">
  </div>
  <div class="personal">
    <h1 class="name">My name is <strong>Nevin Dabechuran</strong></h1>
    <p class="job"><em>A Web designer</em></p>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    You can achieve this by using float (the old way) or flexbox.

    Here is a flexbox example based on your

    I want it to look something like this

    .profile {
            display: flex;
            align-items: center;
            column-gap: 10px;
            margin: 20px;
            border: 1px solid black;
            padding: 5px;
            width: 300px;
            background: #eaeaea;
        }
        
        .profile .thumb {
            width: 100px;
            height: 100px;
            
        }
        .profile .thumb img {
            width: 100%;
            height: auto;
        }

        .profile .name {
            margin: 0;
            font-family: serif;
            font-weight: bold;
            font-size: 18px;
            color: black;
        }
        .profile .job {
            margin: 0;
            font-family: sans-serif;
            font-size: 14px;
            color: black;
        }
    <div class="profile">
    <div class="thumb">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Nevin">
    </div>
    <div class="info">
        <h1 class="name">Nevin Dabechuran</h1>
        <p class="job">Web designer</p>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search