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

How do you align images to the side of text with html and css?

I’ve been working on a website for one of my college classes and we’re just getting to the sort of styling section of the course and I can’t figure out how to align images to the side of things like blocks of text or other images.

For example

    <p class="boxed"> placehooooooooooooooooooooooooooooooooooooooooooooooooo 
      ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
      ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolder
      text </p>
    <p class="image1"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Orchid_-_Stierch.jpg/330px-Orchid_-_Stierch.jpg"

        alt="Orchid performing in 2000">
    </p>

p.boxed {
    background-color: rgba(0, 0, 0, 0.7);
    margin-top: 10px;
    margin-bottom: 100px;
    margin-right: 725px;
    margin-left: 275px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: justify;
    text-justify: inter-word;
    font-family: "Courier New";
    font-weight: bold;
    color: white;
}

p.image1 {
    margin-top: 10px;
    margin-bottom: 100px;
    margin-right: 275px;
    margin-left: 725px;
}

how would I align the image to the right of the text

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    by adding the image to a element, you can change the alignment of it to allow for different positionings.


  2. 0

    To align the image to the right of the text, you can put both elements in the same container and use CSS Flexbox with the container set to display: flex; and justify-content: space-between;, allows the text and image to be automatically aligned with the text on the left and the image on the right.

     <div class="container">
<p class="boxed"> placehooooooooooooooooooooooooooooooooooooooooooooooooo 
ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooolder
text </p>
<p class="image1"> 
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Orchid_-_Stierch.jpg/330px-Orchid_-_Stierch.jpg" alt="Orchid performing in 2000">
</p>
</div>


.container {
display: flex;
}

   .boxed {
   background-color: rgba(0, 0, 0, 0.7);
   margin-top: 10px;
   margin-bottom: 100px;
   padding: 10px;
  text-align: justify;
  text-justify: inter-word;
  font-family: "Courier New";
  font-weight: bold;
  color: white;
  flex: 1;
  }

  .image1 {
  margin-top: 10px;
  margin-bottom: 100px;
  margin-left: 10px; /* Add some margin between text and image */
 }

.image1 img {
 max-width: 100%; /* Ensure image doesn't exceed its container width */
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search