How can you vertically center text without using table-cell and line-height?

I have a webpage at this link and I am trying to vertically align the text. Using table-cell causes all items to display in the same row, which is not what I want as shown in the image at this link. Setting a fixed line-height won't work either since each text has a different size.

Here's my CSS:

img {
    width: 80px;
    height: 81px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Here's my HTML:

<p>
  <img src="../assets/images/recommendations_shoes.png">
  Due to the city's rocky terrain making it slippery, avoid wearing high heels or uncomfortable shoes. Opt for tennis shoes instead.
</p>
<p>
   <img src="../assets/images/recommendations_backpack.png">
   Avoid carrying extra weight. With many slopes and staircases around, choose smaller, lighter backpacks and bags, only carry the essentials. Some attractions may require bags, backpacks, and camera equipment to be stored at reception.
</p>
        ...

See how it looks now

Could someone assist me in achieving this? Thank you very much

htmlcssbootstrap-4vertical-alignment

Answer №2

To align an image in the center, simply set its parent element to flex and use the align-items property with a value of center.

img {
    width: 80px;
    height: 81px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

p {
  display: flex;
  align-items: center;
}

Link to code example

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

"Modify the CSS color of h1 based on the presence of a specific class containing spaces in a div

I am currently attempting to modify the color of a heading by referencing a specific div's class. My attempts so far include: .pagetitle-title.heading { color: purple; } <div class="container"> <h1 class="pagetitle-title heading">I ...

htmlcsswordpress

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

Can I dynamically apply CSS to an existing class using jQuery?

Having a sticky sidebar on desktop presents a challenge when trying to "unstick" it before it overlaps with the footer. The height of the sidebar is dynamic, so its stop position changes as different elements are opened or closed. The main question at han ...

jquerycssclassdom

Enhance the form values using HTML and Javascript before submitting them via POST

Greetings to all! Apologies if my question seems elementary, as I am relatively new to using Javascript/HTML... I am encountering an issue with PayPal integration. In the past, I have successfully implemented it with a single fixed price, but now I have ...

javascripthtmlformsdynamicpaypal

Create a responsive design for a webpage that adjusts font size based on the dynamic type settings in iOS

Is there a way to ensure that my website's font size dynamically adjusts for iOS users? For example, if a user changes the font size in their iPhone settings (Settings > General > Accessibility > Larger Text), I want the webpage font size to ...

htmlcssfontswebkitaccessibility

The art of rotating PDF files and various image formats

Looking for a way to rotate PDF and image files displayed on an HTML page using jQuery. I attempted: adding a CSS class - without success. Here is an example code snippet: .rotate90 { webkit-transform: rotate(90deg); moz-transform: rotate(90de ...

javascriptjqueryhtml

The image grows in size until it requires scrolling to view the entire thing

<!-- Bootstrap 4.1.x --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <! ...

htmlcssbootstrap-4responsive-design

When clicked, activate a different overlay div

I have an image that I want to enhance with some effects. I was able to add a hover overlay using a div. Now, I am looking to add an onclick event to change to another overlay div. Below is the code I have so far, or you can view the CodePen Here <d ...

javascriptjqueryhtmlcss

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

htmlcsssvg

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

javascripthtmlcssreactjssvg

Submitting a particular entry in a form that has been dynamically generated through iteration

This code snippet pertains to the admin panel of a particular website. The page displays appointments requested by customers, allowing the admin to make changes based on availability. <?php while($row = mysqli_fetch_assoc($result)){ ?> <form ...

phphtml

Button's focus event doesn't trigger on iPad

I am facing an issue with adding a bootstrap popover to my website. The popover should appear when the user clicks a button using the focus event. This functionality works fine on desktop browsers, but on the iPad, it seems like Safari on iOS does not trig ...

javascripthtmliosbootstrap-4bootstrap-popover

Reading Lines from a Txt file and Storing Text in a String using ASPX

I am attempting to read a text file using ASPX and then store each line it reads in a string. I have searched online for tutorials but haven't been able to find a straightforward guide. Can someone please assist me with this? Thank you. ...

javascriptasp.nethtml

Aligning a 900px wide element with an orange background on the left and a white background on the right

I have a section on my website that I want to position in the center of the screen. It's a simple task, but I have a specific design in mind. I want the left side of the section to have an orange background, while the right side should be white. I&apo ...

htmlcsscolorsbackgroundposition

Viewport meta tag fails to function properly on mobile devices

While Bootstrap performs well on desktop browsers, it may encounter challenges on mobile devices. I have included the tag below, but it has not seemed to resolve the issue. I suspect there may be a conflicting element causing this problem, but I am unsure ...

bootstrap-4

Initiate keyframe animation after completion of the transition (CSS)

Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...

css

A Bootstrap navigation sidebar with a secure footer and a div that can be scrolled

In the image below, you can see that the scrollable TreeView in the sidebar is not functioning properly. Additionally, I need to have a fixed footer for this sidebar that remains in place when users scroll through the content. How can I resolve this? http ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

It is impossible for me to utilize inline SVG as a custom cursor in CSS

Below is the code I have written. I am attempting to change the cursor using an inline SVG, but it doesn't seem to be working as expected. However, when I use the same code as a background, it works perfectly: .container { width: 50vw; height: ...

htmlcsssvg

Ways to display closing tag in minimized code in JavaScript documents

I am encountering an issue where the closing tag of folded code is visible in my HTML file, but not in my JS files (specifically JSX syntax). I apologize if this is a trivial question, but I am hopeful that someone can assist me in making the closing tag ...

javascripthtmlreactjsvisual-studio-codejsx

Angular CSS Animation not functioning as expected

I have developed a system that retrieves stored messages from the server dynamically. The view for this system is structured as follows: <div id= "messages" data-ng-controller="MessageController"> <div class="message" data-ng-repeat="message ...

cssangularjscss-transitions