I typically use tables to align images and text, but they don't work well on mobile devices. I'd like to switch to using CSS and DIVs instead, even though I have no experience with them.
My goal is to center three pictures with text above each one on the screen, filling it completely for the viewer.
You can view my initial attempt at CSS (which didn't work) and the table I want to replicate here:
Thank you!
To achieve center alignment, wrap your elements inside a single div and use margin auto along with a specified width for centering. Then, within this wrapper, utilize sections or divs with left floating and widths to keep them centered. For aligning text, apply the text-align property.
If you have images, avoid using float and instead center them by setting margin: 0 auto.
Check out an example here.
HTML:
<div class="container">
<section>
<h3>Title1</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title2</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title3</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
</div>CSS:
.container{
width:900px;
margin:0px auto;
}
section{
width:250px;
float:left;
text-align:center;
padding:10px;
}
img.pic{
width:170px;
margin:0 auto;
}I want to emphasize figure 1, figure2, ...all the way up to figure 111. I am limited to making changes in HTML and CSS only, without using JavaScript or jQuery. Is there a different method than just inserting <strong> in the HTML? In CSS, we have : ...
When it comes to the styling of my first line, I have a specific style in mind: * { text-align:left; } This style works well across most parts of the site as they are predominantly left aligned. However, there are few areas where I need the text alig ...
Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...
Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to: <div class='layout horizontal'> < ...
I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...
Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...
Uncertain about the accuracy of my title. Due to certain reasons, I need to assign different IDs for the class, as it only detects ID and not class when hovered over. Therefore, I have created a CSS version where the opacity of a specific div will change t ...
As a newcomer to javascript, I am working on creating custom video controls using js. One issue I am facing is with a span element that contains a mute/unmute icon. When I hover over this span element, a child element appears with an input range bar for ad ...
I encountered an issue where, after clicking the 'order button', the table does not order as expected. Instead, it reverses all the td elements. For example, 'A', 'C', 'B' becomes 'B', 'C', "A". I ...
I've built a dynamic slideshow using jQuery to change images with seamless transitions. To enhance user experience, I'm also updating the page title and URL without triggering a page reload. The code snippet below illustrates how I achieve this: ...
I am currently working on a Java and Selenium code snippet like the one below: public static void main(String[] args){ WebDriver driver; DesiredCapabilities caps; caps = new DesiredCapabilities(); caps.setCapability(PhantomJSDriverService ...
Trying to print a specific part of an Ionic page which contains a long list of items. However, encountering an issue where the entire list doesn't fit on one page and requires scrolling down to view all items. Expecting the print dialog, triggered by ...
While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...
Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...
UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...
Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...
I'm looking to create a form that adds another input text field automatically when the user fills out one. Here is an example of the HTML structure: <form method="post" action="http://localhost/save" class="save"> <fieldset> <div&g ...
Imagine you have HTML code that includes an image with a placeholder: <img class="lazy-load" src="http://via.placeholder.com/150/?text=placeholder" data-src="http://via.placeholder.com/150/?text=real%20image"/> At some stage, you want to implem ...
Feeling a bit frustrated with this issue. I'm working on my Joomla website utilizing Phoca Gallery, and the code it generates includes the following: <img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="So ...
Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...