Placing my image on the left side, I desire to align my paragraph on the right

Despite my extensive online research, I found myself unable to achieve my desired outcome.

I am struggling to align my text either to the left or right of my image.

Take a look at the following code :

HTML :

    <div class="surfooter">
        <div class="flex-container">
            <div class="flex-item">
                <img src="img/Nike.png" alt="Nike" class="img-responsive"/>
                <p>Nike.com</p>
            </div>
            <div class="flex-item">
                <img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
                <p>Adidas.com</p>
            </div>
        </div>
    </div>

CSS :

.surfooter{
    padding-bottom: 50px;
    padding-top: 50px;
    background-color: #466964;
    color: white;
    font-size: 16px;
    position: relative;
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    height: 200px;
    position: relative;
  }
  
  .flex-item {
    margin: auto;
    width: auto;
    height: auto;
  }
  
  .flex-item p{
    color: white;
    font-size: 1.41em;
    font-weight: bold;
    line-height: 1.3em;
    width: 80%;
    margin: 0 auto;
  }

  .flex-item img{
    object-fit: cover;
    border-radius: 100%;
    width: 150px;
    height: 150px;
  }

Thank you for taking the time to read this.

htmlcssbootstrap-4

Answer №1

If you want to modify the content of your text, you must update the flex-item div as follows:

Add this code snippet into your CSS stylesheet:

.flex-item{ 
display:flex;}

Answer №2

To make your flex-item div layout flexibly, add the CSS property display:flex;.

Here is your HTML code:

        <div class="flex-item">
            <img src="img/Adidas.png" alt="Adidas" class="img-responsive"/>
            <p>Adidas.com</p>
        </div>

This is the CSS you need to apply:

       .flex-item{
         display:flex;
        }

Answer №3

Replace your current .flex-item class with the following code to potentially resolve the issue:

.flex-item {
   display:flex;
   flex-direction:row;
}

Answer №4

Here is my solution that worked:

<div class="surfooter">
  <div class="flex-container">
      <div class="flex-item">
          <img src="img/Nike.png" alt="Nike" class="img-responsive"/>
          <p>Nike.com</p>
      </div>
      <div class="flex-item">
          <img src="img/Adidas.png" alt="Adidas" class="img-responsive" />
          <p>Adidas.com</p>
      </div>
  </div>
</div>

This is the CSS code I used:

.surfooter{
  padding-bottom: 50px;
  padding-top: 50px;
  background-color: #466964;
  color: white;
  font-size: 16px;
  position: relative;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: 200px;
  position: relative;
}

.flex-item {
  margin: auto;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-item p{
  color: white;
  font-size: 1.41em;
  font-weight: bold;
  line-height: 1.3em;
  width: 80%;
  margin: 0 auto;
}

.flex-item img{
  object-fit: cover;
  border-radius: 100%;
  
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop Sublime Text from automatically calculating Less2Css

Within my workflow using Sublime Text and Less2Css for dealing with less files, I encountered an issue where specifying the max-height of a container as 100% - 20px resulted in minification reducing it to '80%'. Is there a way to work around this ...

csslesssublimetext

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

What is the best way to maintain body alignment while zooming in and out on a web page? <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> body { font-family: 'Merriweather Sans&apos ...

javascripthtmlcssweb

Rdash Angular: How to Implement a Fixed Header Position on Page Scroll

Hi there, I am currently utilizing Rdash Angular Js. I am wondering if it's achievable to keep the header position fixed while scrolling through the page. I attempted a solution using CSS as shown below, unfortunately it didn't have the desired ...

cssangularjsheader

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

htmlcss

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

htmlcss

What is the most effective method for developing and hosting a Python web application that can securely collect user input and store it in SQL databases?

Currently, I am embarking on a project to streamline data entry for myself. I have SQL tables set up in an Azure database, and I can effortlessly write Python code to add data to them. However, my next endeavor is to develop a web application that allows ...

pythonhtmlsqlflaskweb-applications

Using Bootstrap SCSS in ReactJS without applying Bootstrap CSS classes

After successfully installing bootstrap using the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4b8b5a9b1b8f7ef">[email protected]</a> --save my d ...

csstwitter-bootstrapreactjssassbootstrap-sass

Having trouble aligning text beside Bootstrap input field

I have a form using the Bootstrap framework where I want text on the left of every input to show its purpose. However, the text ends up above the input field like this: Current appearance of the form: https://i.sstatic.net/GUHcO.png <div class="contai ...

htmltwitter-bootstrapcssbootstrap-4

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...

htmlcsscss-shapeszigzag

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

Preventing toggle from altering the width of the side navigation bar

Is there a way to prevent the width of the side bar from changing when toggling the top level items in the side nav bar, especially if the sub navigation items are wider? Click on 'Click me' in the side nav item to see what happens. Check out th ...

javascripthtmlcss

Challenges with cascading style sheets and the integration of PHP's include function

I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...

phphtmlcss

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

htmlcssxpath

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

javascriptjqueryhtmlbootstrap-4

Arranging React Bootstrap columns in a way that the column on the right appears above the column on the left

Is there a way to use React Bootstrap to create a layout with two columns side by side, and have the column on the right stack on top of the column on the left when the screen size is reduced? Check out the code snippet below: import "./styles.css&qu ...

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Having trouble getting the focus-within CSS pseudo-class to work with an HTML label

I'm attempting to create a dropdown menu with checkboxes inside the dropdown area. Below is the code snippet I am using: .search-box { color: black; width: 450px; } .search-box .fake-tb { display: flex; flex-wrap: nowrap; background: #f ...

javascripthtmlcsscheckbox

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

I am currently utilizing css scroll snap for smooth scrolling through sections that are 100vh in height. The functionality of the scroll snap is quite impressive. However, I need to find a way to determine the exact distance the user has scrolled down the ...

javascriptcssscroll-snap

Tips on inline password field placement for a better user interface experience?

While creating a registration form, I ran into a user interface problem. There are two specific changes I'd like to make: The label for Confirm Password should be inline on the same line. The password input should have an eye icon embedded within it ...

htmlcssreactjsbootstrap-4

Position the <i> element to the right side of the <div> element in an HTML document

I am trying to make this <i> element align to the right within my <div>. Here is the HTML code I have so far: <div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center"> <h2&g ...

htmlbootstrap-5