Tips for aligning the contents of multiple tables in HTML to the center

Currently, I am in the process of designing a website where there will be four titles displayed above four images, with corresponding descriptions below each. I have utilized two separate tables for the titles and descriptions. While the layout appears fine on my personal computer, the tables shift to the left when viewed on a larger screen. To resolve this compatibility issue and ensure a consistent appearance across all screen sizes, I believe centering the tables would be the most effective solution. However, my attempts to center the tables using 'align: center' and 'style="text-align: center;" have been unsuccessful. Any advice on how to address this issue would be greatly appreciated. Below is the code I am currently working with:

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 105px;
  font-family: 'Oswald', sans-serif;
}

.text_under {
  font-size: 15px;
  color: grey;
  font-family: 'Oswald', sans-serif;
  width: 150;
  text-align: center;
}

.mobile {
  margin-top: 30px;
  margin-left: 160px;
}

.laptop {
  margin-left: 140px;
  margin-top: 45px;
}

.coding {
  margin-left: 155px;
  margin-top: 45px;
}

.database {
  margin-left: 150px;
  margin-top: 45px;
}

.load {
  border-collapse: separate;
  border-spacing: 130px 10px;
}

.kbg {
  border-collapse: separate;
  border-spacing: 155px 10px;
}
<body>

  <table class="load">
    <tr>
      <td class="mobile_title">Mobile Development</td>
      <td class="mobile_title">Web Development</td>
      <td class="mobile_title">Backend Development</td>
      <td class="mobile_title">Database Creation</td>
    </tr>
  </table>

  <img src="mobile.png" width=160 height=120 class="mobile">

  <img src="laptop.png" width=150 height=100 class="laptop">

  <img src="coding.png" width=150 height=100 class="coding">

  <img src="database.png" width=150 height=110 class="database">

  <table class="kbg">
    <tr>
      <td class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.</td>
      <td class="text_under">The creation of web-based sites using multiple programming languages including HTML, CSS, and Custom word press. These websites, after the creation stages, are hosted online for all to observe.</td>
      <td class="text_under">The process and supporting information that websites need in order to perform wanted tasks. The information is written in codes, the process called programming.</td>
      <td class="text_under">The location of storage of all of the supporting information. This also saves all important files including the back ends of developing websites and/or mobile applications.</td>
    </tr>
  </table>
</body>

htmlcss

Answer №1

According to my observation, utilizing flexbox makes layout design simpler compared to using tables.

.load-wrap {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  /*to center - optional */
  width: 75%;
  margin: auto
}

.load {
  flex: 1;
  padding: 20px;
  box-sizing:border-box
}

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
}

.text_under {
  font-size: 15px;
  color: grey;
}

.mobile {
  margin-top: 30px;
}
<div class="load-wrap">
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
  <div class="load">
    <div class="mobile_title">Mobile Development</div>
    <img src="//placehold.it/160x120" class="mobile">
    <div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
    </div>
  </div>
</div>

Answer №2

To arrange your images in separate columns within a new row, as well as your description text, follow these steps. To center the images, use the following CSS:

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

To center the text, add the following to your .load class:

text-align: center;

View the result in this JSFiddle: https://jsfiddle.net/6w7r18cm/

Note: Remove any additional classes assigned to the img elements.

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

Using Three.js to showcase a <div> positioned above a canvas featuring a dynamic skybox

The process I used to create a skybox on a Three.js canvas is as follows: var urls = [ 'pos-x.jpg', 'neg-x.jpg', 'pos-y.jpg', 'neg-y.jpg', 'pos-z.jpg', 'neg-z.jpg' ] window.cubemap = ...

htmlcsscanvasthree.jsskybox

aligning an icon in the middle of its container

I'm having trouble centering an icon vertically inside its box only. I've tried using vertical-align: middle; but it doesn't seem to be working. I also attempted the line-height method, but the icon has an outer border that stays attached to ...

htmlcssbootstrap-4gridvertical-alignment

Having trouble with jQuery show/hide not functioning properly?

My website has a sub-menu section with a shopping cart icon. When a user hovers over the icon, it reveals a hidden cart section. The user can then move the mouse into the cart section to remove items. The problem I'm facing is that if a user displays ...

javascriptjqueryhtml

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

javascriptjqueryhtmlcss

Is there a way to set the same href link for the active class in the navbar using bootstrap-vue?

I am currently utilizing this navbar. It works fine when the href links are unique, but I encounter an issue when two pages share the same link - the active class is applied to both list items with that link in the manner I have written. Vue.component(& ...

cssvue.jsbootstrap-vue

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

Button Click Does Not Trigger Bootstrap Modal Display

This is a sample Bootstrap document that includes JS and CSS files to display a list properly in Bootstrap. However, the Modal does not appear when clicking on Launch demo modal. No JavaScript errors are displayed in the Console. Can you help troubleshoot ...

javascripthtmltwitter-bootstrapbootstrap-modalbootstrap-5

Implementing the onEnded event handler for an HTML video element

I recently experimented with the video tag using flowplayer and I wanted to share my code below: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script> <!-- 2. flowplayer --> <script src="http://releas ...

jqueryhtmlvideoflowplayer

The calculator program fails to compute the width

My table has 4 columns with different widths: column 1: fixed width of 500px; column 2: calc(33% - 165px); column 3: calc(33% - 165px); column 4: calc(33% - 165px); Despite having the same value for the last 3 columns, their actual widths are different. ...

htmlcss

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

cssblogger

Extract Hyperlink from a Specific Class using Python's Selenium

Currently, I am faced with the challenge of extracting the href from the HTML snippet below. However, my method requires the identification of the second data class in order to retrieve the href: <tr> <td class="data"> <a targe ...

pythonhtmlseleniumhref

When I submit my form in Django, the data does not get added to the database

My current project involves creating a contact page for a website using Django. The goal is for clients to enter their information, which should then be submitted to the database. Even though the form is submitting without errors and the project runs smoot ...

pythonhtmldjangodjango-forms

execute numerous Jssor Caption instances simultaneously

I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center. I tried using a div for each image with a caption, and it works well. However, the second image starts ...

javascriptjquerycssjssor

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

javascripthtmliframedom-events

Retrieve various Hyperlinks from database for presentation within a gridview

My objective is to include multiple Hyperlinks in a single cell of a gridview, separated by commas. The approach I have considered is to generate the HTML code during data retrieval. I have devised a simple query that creates a series of Hyperlinks based ...

htmlasp.net

What is the reason behind H1 tags not requiring a class or ID in CSS?

As I was reviewing my CSS code, I noticed that the h1 tag is defined like this: h1 { .... } Unlike everything else in my code, which either has an id "#" or a "." class preceding it. This made me wonder why header tags don't require this. Could it b ...

css

Facing problems with the directory!

I'm experiencing some trouble with directory paths. Let's say I have a file located in the following directory: public_html/v3/index.php And from there, I want to access this file: public_html/navigation/sideLogIn.php I've tried using t ...

phphtml

Unable to modify the border radius of the carousel indicators in Bootstrap 5

Currently, I am working with the carousel component in Bootstrap 5.1. I have encountered an issue where I am unable to add border-radius to the carousel indicators, despite trying various methods. Even though the inspector shows that the indicators (HTML ...

cssbuttoncarouselbootstrap-5border-radius

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

Using CSS3 keyframe animations to stop and remain on the final frame

I'm having trouble getting a CSS3 keyframe animation to stick at the last frame after it has completed. I thought setting animation-fill-mode to forwards would work, but it doesn't seem to be doing anything. .animatedSprite { .animation-nam ...

javascriptcssanimationless