Align an image vertically beside a paragraph

I've been attempting to align an image, which is typically shorter in height than the paragraph next to it, in the middle vertically but just can't seem to figure it out.

<div class="element">
    <img  src="http://dummyimage.com/75" />
    <p  class="text" >Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>
    </p>

Here is the CSS I have so far 

.element{display:table;height:100%}
.text{display:table-cell;background:#CC0;padding:20px;}
.element img{display:table-cell;margin-right:10px;vertical-align:middle;}

And you can view a jsfiddle example http://jsfiddle.net/0krndsav/

Most of the other inquiries I've found involve aligning the paragraph in the middle of an image...

Any suggestions?

htmlcss

Answer №1

Utilize display: inline-block; to align elements vertically using vertical-align.

Styling with CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

Creating the HTML structure

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

Check out the demonstration here

Answer №3

To center your image vertically within a div container, you can use the following CSS properties: table-cell and vertical-align: middle.

.image-container {
    display:table;
}
.image-details {
    display:table-cell;
    background:#CC0
}
img {   
    margin-right:10px;
}

#imgCont{
    display: table-cell;
    vertical-align: middle;
}
<div class="image-container">
    <div id="imgCont">
        <img width="75" height="60" src="http://dummyimage.com/75" />
    </div>
    <p class="image-details">Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>Lorem Ipsum
        <br/>
    </p>
</div>

Answer №4

Clickable Link

To achieve the desired effect, follow these steps:

div, span
{
    display: flex;
    align-items: center;
}

Answer №5

Check out this code snippet for styling a calendar event using CSS:

.ca_event_detail {

  background: #CC0;

  width: 100px;

  display: inline-block;

  vertical-align: middle;

}

img {

  margin-right: 10px;

  vertical-align: middle;

}
<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <p class="ca_event_detail">Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>Blah Blah
    <br/>
  </p>
</div>

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

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

phphtmlcssajaximagemap

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

javascripthtmlhtml5-videogetusermedia

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

App builder shows raw HTML code instead of generating a dynamic table

I am currently working on an application that requires gathering data in a csv format from Google Sheets and importing it into App Inventor. Additionally, I need to include HTML code to display the table in a more visually appealing way. Here is what the ...

androidhtmlgoogle-sheetssamsung-mobileapp-inventor

Chosen option from the Bootstrap drop-down menu

Struggling with two problematic input fields on my Bootstrap website... The first is a Bootstrap Typeahead input field: <input type="text" id="typeahead" name='name' placeholder='The name' class="form-control" data-provide="typeahe ...

javascriptjqueryhtmltwitter-bootstrap

Error encountered while attempting to save HTML table data as text in MySQL due to SQL syntax

Query for adding text to the database: INSERT INTO uri VALUES('') I encountered the following syntax error: 'MySql.Data.MySqlClient.MySqlException' was found in MySql.Data.dll You have an error in your SQL syntax; please refer to t ...

htmlmysqlsql

When hovering over CSS cards, they transform into a zigzag pattern and the text spills out of the box with overflow

I'm having an issue with my webpage where the text on my CSS cards is overflowing and not staying within the card. Additionally, when I hover over an element, the remaining CSS cards are arranged in a zig-zag manner. Here's the code snippet for r ...

cssbootstrap-4flexboxcss-selectorsstyling

Problem with logo in MVC4 apps

I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...

htmlasp.net-mvcasp.net-mvc-4

Incomplete width allocation for the floating div positioned to the left

I've encountered an issue with the placement of the side-text div in relation to the image. Currently, without specifying the width of the side-text div, it automatically moves to the bottom. To address this problem, I attempted using display:inline- ...

htmlcss

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

javascripthtmlinternet-explorercss

Tips for achieving consistent text and image alignment through CSS styling

My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image. I am facing an issue when trying to position the image statically in a wa ...

htmlcsspositioning

Automatically close one option upon opening another

Displayed below is the HTML code that I have printed with echo: <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="toggle_status"> <select class="status_change"> <option>Ac ...

javascriptphpjqueryhtmlajax

What could be causing my AJAX script to not execute upon form submission?

My form's ajax functionality is not working properly. When I try to submit the form, nothing happens. Can someone please assist me with this issue? $( '#my-form' ) .submit( function( e ) { $.ajax( { url: 'u_mainslid ...

phpjqueryhtmlajaxforms

Difficulty arises with z-index when hover effects are applied to clip-path shapes

I'm encountering an issue where I am attempting to make two clip path polygons overlap each other when hovered over by the mouse. I have been using z-index values and trying to adjust them based on which overlay is being hovered over, but unfortunatel ...

htmlcssz-indexclip-path

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

javascripthtmlnode.jsexpress

Ways to enable smooth scrolling feature in Safari

I attempted to implement smoothscroll using a polyfill by adding the following code to the bottom of my body tag: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99a8486869d819a8a9b868585c ...

javascripthtmlcss

Display of items in a submenu through a drop-down menu when hovering over it

As I work on creating a Navbar with a dropdown menu, I'm encountering an issue where hovering over the main list element displays all the submenu contents at once. No matter what I try in my CSS, including adjusting the positioning of li and ul elemen ...

htmlcsscss-positionnavigationbar

Display an SVG image on a web page using its URL in an HTML

I have a URL to an SVG file hosted on an external server, for example: user-online.svg. I want to display this image on my website. How can I achieve this? I attempted the code below, but it only displays https://i.sstatic.net/r390N.png. <img src=&quo ...

htmlimageurlsvg

Visible background between div elements

There seems to be a background color visible between the image divs. I initially suspected it could be related to margins. Even after attempting to set the div to absolute positioning and the parent to relative, the problem persists. The picture still fail ...

htmlcssimagebackgroundposition

Issue with Hidden Horizontal Scrollbar Functionality in JQuery Mobile Not Resolving

http://jsbin.com/UREQUbu/1/edit I have a header with 9 buttons. I managed to get the horizontal scrollbar to work, but I want it hidden yet still scrollable. I came across a JQuery plugin that worked perfectly for scrolling on my laptop, but unfortunately ...

htmlcssjquery-mobile