Tips for positioning an image, text, and button horizontally without resorting to tables

Does anyone know how to align a movie poster image, description text, and add to cart button on the same line? The text must be centered aligned without wrapping around the button or image, just like in this example.

https://i.sstatic.net/yQaCl.png

Currently, my setup looks like this. The movie description text is not center-aligned and wraps around the button. https://i.sstatic.net/V25NT.png

This is the code I am using. Can anyone help me modify it so that it resembles the first image?

    <div class="card-block">
        <div class="pull-left"><img src="https://{{movie.image}}" alt="[Image Missing]" width="70px" /></div>
        <br><span>{{movie.description}}</span>
        <span>
            <button class="float-right btn btn-sm btn-success" (click)="addToCart(movie)">
                Add to Cart
            </button></span>
    </div>
htmlcss

Answer №1

There are numerous solutions available for resolving your issue.

You have the option to utilize flex

 .container {
      display: flex;
      align-items: center;
     }
     
.container .item:nth-child(2){ /*Only second item padding and center text*/
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
}
    <div class="container">
      <div class="item">
          <img src="https://via.placeholder.com/80x100">
      </div>
      <div class="item">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
      </div>
      <div class="item">
          <button> Add to cart </button>
      </div>
    </div>>

Alternatively, you can experiment with the new CSS-Grid, although its support may be limited on certain browsers at present.

.container {
      display: grid;
      grid-template-columns: 1fr 4fr 1fr; /*Here you set how many columns will be and how much of the space they will take, for example there are 3 values, meaning 3 columns, the first and the last one will take 1 space of the row, and the second one will take 4 spaces*/
      align-items: center;
      grid-gap: 1em; /*The gap between items*/
    }
    
    .container .item:nth-child(2) {
       text-align: center;
    }
    <div class="container">
              <div class="item">
                  <img src="https://via.placeholder.com/80x100">
              </div>
              <div class="item">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
              </div>
              <div class="item">
                  <button> Add to cart </button>
              </div>
            </div>>

Answer №2

Consider utilizing the flex property for better results, like in this example:

.container {
  display: flex;
  flex-direction: row;
  align-items: center
}
p {
  text-align:center
}
<div class="container">
  <img src="https://via.placeholder.com/150" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet est vel erat rutrum tempus. Etiam auctor dapibus magna, ut auctor metus pretium sed.
  </p>
  <button>
    Add
  </button>
</div>

This suggestion could be beneficial.

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

Is there a way to refresh only a specific div when clicked?

My preferred tech stack includes Django and Python. Here is the scenario: In models.py : class Contacts(models.Model): lastname = models.CharField(max_length=150) firstname = models.CharField(max_length=150) In views.py def home(request): ...

jqueryhtmlajaxdjangoreload

Issues with IE8 compatibility on the website

I'm in the process of developing a website and I'm facing some issues specifically with IE8 or later versions. For reference, here is a temporary link to the site: . 1 The problems I am encountering are as follows: The login/register form disp ...

jqueryhtmlcssinternet-explorertransparency

Can JavaScript trigger an alert based on a CSS value?

Hello, I am facing an issue. I have created a blue box using HTML/CSS and now I want to use JavaScript to display an alert with the name of the color when the box is clicked. Below is my code: var clr = document.getElementById("box").style.background ...

javascripthtmlcss

Mobile devices experiencing issues with Bootstrap navbar collapse functionality

When I resize my browser, everything looks fine. However, when I try to access the website from my phone or tablet, it loads the desktop version that is not collapsed properly. Could there be any issues with my HTML code? <nav class="navbar navbar-cus ...

htmltwitter-bootstraptwitter-bootstrap-3

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...

jqueryhtmlcss

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

htmlvelo

What is the best way to position two elements inline?

I was trying to create a container named project-item that looks like the image linked below: https://i.stack.imgur.com/6XzZ9.png My goal was to align the project logo and the title (h3) in one line, but I struggled to find a suitable solution. This is ...

htmlcss

Tips for adjusting the size of a textarea to perfectly fit within a table cell

I have a textarea displayed within an input in a table, but I am looking to resize it so that it completely fills the table cell up to the borders. Here is the logic: <textarea type="textarea" value="{{data.directRowNo}}" id = " ...

javascripthtmlcssangular

Using AJAX to send data with a POST request in Django may not function properly

Let me preface by saying I have searched for solutions online, but none of them seem to address my specific issue (mainly because they use outdated methods like Jason). I am currently working on a Django project and trying to implement ajax for a particul ...

pythonhtmlpython-3.xdjangoajax

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

When setting a stroke-width: 1 on a <rect> element in SVG, typically a stroke is placed on every side of the rectangle. Is there a way to specify a stroke width on just three sides of an SVG rectangle? ...

htmlsvgvector-graphicsinkscape

Executing Javascript to populate a div element with content based on its CSS class

Is there a way to isolate my View (HTML & CSS files) within a controller like JavascriptCode/AJAX, so that upon page load, only the controller binds the data to a specific element such as a DIV based on its class? Do you think this is achievable? If so, ...

javascriptjqueryhtmlcss

Obtain the dropdown menu links for every row in a table using Python3 along with Selenium

Seeking assistance as a beginner in Python, I am attempting to automate the downloading process of old newspaper archives from a specific website () using the script provided below. Despite my efforts, I have encountered difficulty in getting the script t ...

htmlpython-3.xseleniumpdf

Having trouble inserting a new row into the AngularJS table?

Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...

htmlcssangularjs

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

Is it possible to modify the border colors of separate elements in Bootstrap 5?

<div class="m-3 p-3 border-5 border-top border-danger border-bottom border-primary"> Can borders be styled with different colors? </div> Is there a method to achieve this, possibly using sass? ...

csstwitter-bootstrapbootstrap-5

Password Reset Function Malfunctioning

Could somebody please assist me in resolving the issue with the reset email? When attempting to reset it, I received the following message: An email with further instructions has been sent. However, I did not receive a reset link. Here is the reset file. ...

phphtmlmysql

What is the best way to initiate a change event using JavaScript?

I am attempting to enable my 4th checkbox automatically when there is a new value in the textbox (myinput). If the textbox is empty, I want to disable it. Currently, you have to tab out before the change event is triggered. Also, how can I check for an e ...

javascriptasp.nethtml

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

javascripthtmlangularmongodbtypescript

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

htmlcssangularjsionic2hybrid-mobile-app