Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS.

Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. 

#img_cont {
    display: table;
    width: 90%;
    margin: 20px auto;
}
    
#img_cont a {
    display: table-cell;
    text-align: center;
    width: 16%;
}
    
#img_cont img {
    width: 100%;
    max-width: 150px;
}
 
.reviews_block {
    background: #F04950 url('images/layout/love_hearts.png') center;
    color: #F5F5F5;
    position: relative;
    -webkit-box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5);
    -moz-box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5);
    box-shadow: inset 0 -9px 11px -5px rgba(104, 12, 16,.5), inset 0 9px 11px -5px rgba(104, 12, 16,.5);
}
     
.reviews_block a {
    color: #F5F5F5;
}
        
.reviews_block .reviews .section_content {
    max-width: 1100px;
    margin: auto;
    padding: 3%;
}
    
.reviews_block .reviews {
    text-align: center;
}
   
.reviews_block .reviews img {
    width: auto;
}
    
.reviews_block .reviews .reviewer_pic {
    background: #FFF;
    display: table;
    margin: 2em auto;
    padding: .5em;
    border: 1px solid #F76F80;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
    
.reviews_block .reviews .reviewer_pic img {
    background: #FFF;
    padding: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
 
.reviewer_info p {
    line-height: 150%;
    display: table;
    margin: 0 auto;
}
   
.review_rating {
    display: table;
    font-size: 200%;
    line-height: 100%;
    margin: 1em auto;
}
    
.review_content {
    max-width: 650px;
    margin: auto;
    font-size: 130%;
    line-height: 150%;
}
    
.review_pullquote {
    margin: .5em 0;
    padding: 0;
    border: 0;
    color: #FFF;
    line-height: 120%;
    font-weight: normal;
    font-size: 200%;       
    font-weight: 900;
    font-size: 250%;
    line-height: 100%;
}
<p id="img_cont">
    <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
    <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
    <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
</p>

htmlcss

Answer №1

<p id="img_cont">
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png" <p> Sample text here. </a></p>
</p>

Is completely incorrect. Modify it to the following:

 <p id="img_cont">
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
  <a href="#"><img src="/wp-content/themes/webbie/images/write13.png"> <p> Sample text here. </p></a>
</p>

While this may not resolve your issue, it should enhance certain aspects.

Answer №3

Your markup does not adhere to valid HTML standards.

  1. Make sure to close your img tags with >.
  2. Avoid nesting p tags within other p tags.
  3. Your <p> tags are mixed in with the <a> tags.

If you want 3 columns side by side, here are a few solutions:

I. Using floats:

#img_cont > * {
  width: 33.33%;
  float: left;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}
#img_cont > a > img {
  max-width: 100%;
  height: auto;
}
<div id="img_cont">
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
</div>

II. Using flexbox:

#img_cont {
  display: flex;
}
#img_cont > * {
  padding: 0 10px;
  box-sizing: border-box;
}
#img_cont > a > img {
  max-width: 100%;
  height: auto;
}
<div id="img_cont">
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
  <a href="#">
    <img src="http://s3.amazonaws.com/37assets/svn/generic-brands.jpg" />
    <p>Sample text here.</p>
  </a>
</div>

III. Using html tables

Avoid using tables for layout. It is considered bad coding practice. (While it was once used as a cross-browser solution, Chrome developers are now discouraging the use of table elements for anything other than tabular data due to its negative impact on performance). In short, avoid using it!

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

Arrange text and a button side by side in a table cell using an Angular directive and an HTML template

I have successfully implemented an Angular search function on my project. You can find it here to allow users to search for courses. The search function uses a read-more directive that displays a preview of the description and keywords before allowing use ...

htmlcssangularhtml-tablecss-tables

the ajax success function is malfunctioning

I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...

jquerycssajax

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Is there a way to dynamically add <td> based on the quantity of values in a JSON object?

I have developed a program that retrieves values from JSON and I aim to display these values in a table. Currently, only the last array value is being displayed in the table even though all values are available in the console. The objective now is to dynam ...

javascriptjqueryjsonhtml

The Viadeo Social Toolbox seems to be encountering technical difficulties at the moment

I attempted to utilize a Viadeo Social Toolbox, specifically the Viadeo Share Button, but it seems to be malfunctioning in certain browsers? I came across some outdated viadeo share URLs like this: http://www.viadeo.com/shareit/share/?url=${url}&title ...

javascriptjqueryhtmlviadeo

Interactivity with SVG clip-path featuring multiple paths through hover events

I have a unique SVG demo image with multiple circles that are clipping an animated GIF. Can we detect hover events for each individual circle as the user mouses over them? For example, the top-left or middle-right circle? Is it also possible to change th ...

csshtmlsvgclip-path

The height of the <div> element is not increasing along with the content inside. If I set the height to "auto

I encountered an issue with my webpage design. It has set dimensions with blue borders on the sides and bottom. The problem arises when I add Facebook comments to the page - as more comments are added, they extend beyond the bottom of the webpage, below ...

csshtmlborder

Achieving equal height for the inner div in Flexbox to match the height of its parent

I am currently using flexbox to structure a web application. While it is functioning as expected for most parts, I am encountering an issue with the main content area. The "router-view" element has the desired full height, but the nested div inside of it d ...

htmlcssflexbox

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Selenium - How to pass a file path to a dynamically generated input element that is not visible in the DOM

Check out this example of HTML code: This is how you create a visible button and display the selected file: <button id="visible-btn">visible button</button> <p>selected file is: <span id="selected-file"></spa ...

javascriptpythonhtmlreactjsselenium

The XML layout to facilitate the PHP Ajax Dynamic Search

Hello everyone, I recently came across a PHP Ajax Live Search example at this link and attempted to implement it. However, I encountered difficulties with the XML structure. Can anyone provide assistance in creating the optimal XML structure for this code? ...

phphtmlajaxxmllivesearch

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css

Tips for displaying a Bootstrap 4 table on smaller screens

I have a Bootstrap 4 table filled with JSON data. The table renders perfectly on the UI, but users on smaller devices must scroll to view all the data. Despite there not being much data in the HTML table, users still need to scroll on small devices. I wa ...

csshtmlbootstrap-4media-queriesbootstrap-table

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked. I am working on coding a "calculator layout" and would like to start with this part 1 2 3 4 5 6 7 8 9 0 This is what I have been working on and struggling with. $(docume ...

javascripthtmljquerycss

The z-index is preventing me from selecting a certain area

I'm currently facing a challenge with a Bootsrap card that seems to be unclickable and I am unable to type input into the form inside of it. The root cause appears to be related to the z-index that I used to position the card "behind" the header and f ...

htmlbootstrap-4

Tips for dynamically injecting HTML content in an Angular web application

I'm currently working on an angular website dedicated to a specific book. One of the features I want to include is the ability for users to select a chapter and view an excerpt from that chapter in HTML format. However, I'm facing a challenge wh ...

htmlangularweb

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

htmlcsshover

Customize elements such as MuiTab that rely on media queries

Looking to customize the font size for MuiTab using CSS overrides. While following the material-ui documentation for CSS overrides, I successfully adjusted the font size for most elements. However, I encountered an issue with elements that utilize media q ...

cssmaterial-ui

Is it possible for a "position:absolute" div to maintain its relative width?

Imagine having two nested divs like the following: <html> <body> <div id="outer" style="width:50%"> <div id="inner" style="width:100%"> </div> </div> </body> </html> Currently, the i ...

htmlcsspositionabsolute

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver