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

Utilizing CSS to create a repeating background image within a specified container

I'm currently working on setting up a container with a background image that repeats only when the contained div elements are long enough. However, I seem to be encountering issues getting the image to repeat properly within the #container code. This ...

csscontainers

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the he ...

javascripthtmlcssreactjs

What is the best way to adjust the size of a Div slideshow using

I need help with creating a slideshow that covers my webpage width 100% and height 500px. The image resolution is 1200*575. Can someone assist me with this? CSS #slide{ width : 100%; height: 500px; } HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcss

What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting display:flexbox; flex-direction:column; Here is the HTML tabl ...

cssvue.jsbootstrap-5

What is the best method to prevent next.js components from overlapping one another?

I recently created a website using next.js and noticed an issue in my index.js file. There is a div that houses the main components of the site: class Page extends Component { render() { return ( <div className={styles.container}> ...

javascripthtmlreactjsnext.js

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

javascriptjqueryhtmlajax

Avoiding Backbone Routing Conflicts when Implementing CSS3 Targeting

I have implemented a CSS target to create some basic animation in my Backbone project. However, I am facing an issue where the method I am currently using adds a #banner to the URL, which Backbone tries to interpret as a route if users refresh the page aft ...

cssbackbone.js

Enable the expansion of a div by dragging and dropping an image onto it

Take a look at this fiddle. In this fiddle, I am able to drag and drop images onto the .drop-zone. However, I would like to enhance it so that when I drag an image onto it, the .drop-zone div expands to where I place the image. It's okay if the expand ...

javascriptjquerycssjquery-ui

Using HTML within a Material-UI Accordion component

I am attempting to display HTML content within an Accordion component. import {Accordion, AccordionDetails, AccordionSummary, Typography} from '@material-ui/core'; import { Badge } from 'reactstrap'; ... const buildAccordion = (f, i) ...

htmlreactjsmaterial-uiaccordion

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

javascripthtmlwysiwygwysihtml5

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...

javascripthtmljquerycss

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

Looking to customize the .btn-primary text color. I attempted to modify the background color in _variables.scss by adding the following line: $primary: #a1c1b6; However, I was unable to change the text color despite trying various options. // not working ...

csstwitter-bootstrapbootstrap-4sass

Backdrop behind of Bootstrap modal located back of other page contents

I'm facing some challenges after transferring a website I developed locally to a live server. The modal windows are appearing behind other content on the live server, although they work perfectly fine on the local version. Despite my attempts to adju ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

When should the preloader be placed within the DOMContentLoaded or load event?

I'm looking to implement a preloader on my website to ensure everything is fully loaded - images, JavaScript, fonts, etc. However, I'm unsure whether to use the following: window.addEventListener('DOMContentLoaded', () => { // code ...

javascripthtmlcss

Selenium - How to effectively obtain hyperlinks?

There are numerous web elements similar to this example <a data-control-name="browsemap_profile" href="/in/quyen-nguyen-63098b123/" id="ember278" class="pv-browsemap-section__member ember-view"> <img widt ...

htmlseleniumweb-crawlerabot

I specialize in optimizing blog content by omitting the final line within a React framework

https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...

javascriptcssreactjsreact-hooks

The CSS class is mistakenly being applied to the entire page instead of just the specific div it was

Here is the HTML code I am working with: <!DOCTYPE html> <head> <title></title> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" /> <link rel="styl ...

htmlcss

Dynamic table in Vue.js updates with saved data when button is clicked

I am looking for assistance on how to work with two or more parameters using Vue.js. I have a data-saving functionality where three inputs are used and the data is saved to a table upon button click. There is an $.ajax() function involved, but I need help ...

javascriptjqueryhtmlajaxvue.js

Optimize HTML outputs in Smarty by reducing the file size

Is there a way to minify all output HTML templates in Smarty automatically? Would it be possible to set something like this: $smarty->minify = true; Additionally, I have come across the {strip} function but using it in every single .tpl file is not fe ...

htmlcompressionsmartyminify

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

javascriptjqueryhtmlweb