Align a series of items in HTML to the center side by side

Currently, I am in the process of creating a personalized homepage that features multiple lists of links placed next to each other. However, I'm facing a dilemma on how to center all of them while still maintaining the desired format. If you'd like to see what my current homepage layout looks like, you can check it out here: https://i.sstatic.net/omecr.png

My main question is: How can I ensure that these lists of links are centrally aligned on the page while keeping them formatted to appear alongside each other as shown in the image? To provide more context, I have included a link to my index.html file on Pastebin: http://pastebin.com/wW1GzUUJ, as well as my style.css file for your reference: http://pastebin.com/BsHd42ED.

csshtml

Answer №1

To optimize your layout, consider using flexbox.

Group all the .all div elements within a parent container and apply display: flex to it.

That's essentially all you need. Here is a sample implementation:

body {
  background-color: #282828;
}
h3 {
  color: #ebdbb2;
  font-family: 'Roboto Mono', monospace;
}
h1 {
  font-family: 'Pacifico', cursive;
  text-align: center;
  color: #ebdbb2;
  font-size: 90;
}
a {
  color: inherit;
  text-decoration: none;
}
list {
  text-align: center;
  text-decoration: none;
}
.container {
  display: flex;
  align-items: flex-start;
}
.links {
  margin-top: 20px;
}
.all {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.google {
  text-align: center;
  background-color: #cc241d;
  width: 200px;
}
reddit {
  text-align: center;
  background-color: #458588;
  width: 200px;
}
.programming {
  text-align: center;
  background-color: #689d6a;
  width: 200px;
}
.gaming {
  text-align: center;
  background-color: #d65d0e;
  width: 200px;
}
.linux {
  text-align: center;
  background-color: #98971a;
  width: 200px;
}
.links {
  text-align: center;
  color: #282828;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  font-weight: bold;
  background-color: #ebdbb2;
  width: 200px;
}
<h1>Hello</h1>
<div class="container">
  <div class="all">
    <div class="google">
      <h3>google</h3>
    </div>
    <div class="links">
      <a href="https://www.google.com">
        <p>google</p>
      </a>
      <a href="https://www.youtube.com/feed/subscriptions">
        <p>youtube</p>
      </a>
      <a href="https://drive.google.com/drive/my-drive">
        <p>drive</p>
      </a>
      <a href="https://mail.google.com/mail/u/0/#inbox">
        <p>gmail</p>
      </a>
      <a href="https://play.google.com/books">
        <p>books</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="reddit">
      <h3>reddit</h3>
    </div>
    <div class="links">
      <a href="https://www.reddit.com/">
        <p>front</p>
      </a>
      <a href="https://www.reddit.com/r/linux/">
        <p>/r/linux</p>
      </a>
      <a href="https://www.reddit.com/r/unixporn/">
        <p>/r/unixporn</p>
      </a>
      <a href="https://www.reddit.com/r/chemistry/">
        <p>/r/chemistry</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="programming">
      <h3>programming</h3>
    </div>
    <div class="links">
      <a href="https://github.com/">
        <p>github</p>
      </a>
      <a href="https://www.codecademy.com/learn">
        <p>codecademy</p>
      </a>
      <a href="http://stackoverflow.com/">
        <p>stack overflow</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="gaming">
      <h3>gaming</h3>
    </div>
    <div class="links">
      <a href="http://store.steampowered.com/">
        <p>steam</p>
      </a>
      <a href="https://www.gog.com/">
        <p>gog</p>
      </a>
    </div>
  </div>
  <div class="all">
    <div class="linux">
      <h3>linux</h3>
    </div>
    <div class="links">
      <a href="https://wiki.archlinux.org/">
        <p>archwiki</p>
      </a>
      <a href="https://aur.archlinux.org/">
        <p>aur</p>
      </a>
      <a href="https://forum.antergos.com/">
        <p>antergos</p>
      </a>
    </div>
  </div>
</div>

Answer №2

To ensure that the titles of your groups appear at the top, you can set the display property to inline-block for your .all elements and then apply a vertical-align of top. I have added a class called title to simplify the CSS.

If you want to see a dynamic version in action, check out the JSFiddle link below. You can manipulate the links within groups or even create new groups using a JSON object.

https://jsfiddle.net/44b5oj4z/1/

body {
  background-color: #282828;
  text-align: center;
}

h3 {
  color: #ebdbb2;
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Pacifico', cursive;
  text-align: center;
  color: #ebdbb2;
  font-size: 90;
}

a {
  color: inherit;
  text-decoration: none;
}

list {
  text-align: center;
  text-decoration: none;
}

.all {
  display: inline-block;
  vertical-align: top;
  align-self: center;
  margin-left: 1em;
}

.all:nth-child(1) {
  margin-left: 0;
}

.title {
  text-align: center;
  width: 12em;
}

.google {
  background-color: #cc241d;
}

reddit {
  background-color: #458588;
}

.programming {
  background-color: #689d6a;
}

.gaming {
  background-color: #d65d0e;
}

.linux {
  background-color: #98971a;
}

.links {
  text-align: center;
  color: #282828;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
  font-weight: bold;
  background-color: #ebdbb2;
  width: 12em;
}
<h1>Hello</h1>
<div class="all">
  <div class="title google"><h3>google</h3></div>
  <div class="links">
    <a href="https://www.google.com"><p>google</p></a>
    <a href="https://www.youtube.com/feed/subscriptions"><p>youtube</p></a>
    <a href="https://drive.google.com/drive/my-drive"><p>drive</p></a>
    <a href="https://mail.google.com/mail/u/0/#inbox"><p>gmail</p></a>
    <a href="https://play.google.com/books"><p>books</p></a>
  </div>
</div>
<div class="all">
  <div class="title reddit"><h3>reddit</h3></div>
  <div class="links">
    <a href="https://www.reddit.com/"><p>front</p></a>
    <a href="https://www.reddit.com/r/linux/"><p>/r/linux</p></a>
    <a href="https://www.reddit.com/r/unixporn/"><p>/r/unixporn</p></a>
    <a href="https://www.reddit.com/r/chemistry/"><p>/r/chemistry</p></a>
  </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

What could be the reason that my submenus are not appearing as expected?

I'm currently working on refining the navigation bar design for a website, but I've encountered a problem with the submenu functionality. It appears that only one submenu is visible while the others remain hidden. For example, when navigating to ...

htmlcsssubmenu

Place a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Troubleshoot padding problems in mpdf

Note: mpdf 6.0 Greetings, In my efforts to produce precise PDFs using mpdf for future printing purposes, I have encountered an issue with the positioning of elements on the page. I require these elements to be positioned precisely from the top left corne ...

cssmpdf

Reorder columns according to the device type

Seeking advice on reordering content based on user device. Preferred order for mobile: A B A B Preferred order for PC: A B B A Attempts made so far: <div class="row"> <div class="col-sm-5 col-sm-pull-5"> ...

htmlcssbootstrap-4col

Troubleshooting a dysfunctional collapsed navbar in React with Bootstrap 5

I am experiencing an issue where the collapsed navbar icon does not expand when clicked on smaller screens. I followed the example provided by bootstrap 5 and made sure to include bootstrap css/js and jquery. class CustomNavBar extends Component { re ...

javascripthtmlcssreactjsbootstrap-5

Arranging List Items within a Container

What's the best way to align three different elements within a div? The elements are structured in an unordered list: Left, Center, and Right. I attempted to float the right element using float: right, and applied margin: 0 auto with a set width for ...

htmlcssweb

A Guide on Adding Excel-Like Filtering Functionality to AngularJS

I am struggling to implement a simple Excel-like filter for a table using AngularJS (v.1). I have shared my code snippet below and would appreciate any help to show filtered data in the table after checking a checkbox and clicking on the OK button. I have ...

javascriptjqueryhtmlangularjs

Is there a way to bring together scrolling effects and mouse movement for a dynamic user

If you want to see a scrolling effect, check out this link here. For another animation on mouse move, click on this link(here). Combining both the scrolling effect and the image movement might seem challenging due to different styles used in each templat ...

javascriptjqueryhtmlcss

Creating a dynamic category menu using angularJS

I'm struggling with the logic behind creating a category menu using AngularJS I need to display all categories with a parent category id of 0. Once that is done, I want to display all subcategories that belong to each parent category. The final categ ...

htmlangularjsangularjs-ng-repeatangular-ng-if

The enigmatic void nestled amidst two dividers

I designed a layout with two buttons beside a progress bar, where the buttons are enclosed within a <div> element: <div class="block"> <div class="progress progress-striped active"> <div class="progress-bar" role="progress ...

javascripthtmlcsstwitter-bootstrap

Fade out a div with jQuery when hovered over, while preventing the links within the div

I've been experimenting with using jQuery to create a fade effect on a div when hovered over. However, I'm encountering an issue where the anchor link within the div cannot be selected once it is shown. $('#show').hover(function() { ...

jquerycss

Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project. Here is the CSS code I am using: /*overriding bootstrap*/ .tooltip-inner { border: 1px solid #0ad; background: #FFFF ...

htmlcsstwitter-bootstraptwitter-bootstrap-tooltip

Bootstrap troubleshoot: Solving grid and card complications

I have nearly completed a crucial section in my Django project by implementing panels that contain a set of cards. Using Bootstrap 3 (BS3), I have integrated cards from BS4 into BS3. Encountering a peculiar issue, I seek advice from the community due to t ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Getting the JavaScript file name within another JavaScript file - a simple guide

Imagine having an HTML file that references two external JavaScript files. One of these JavaScript files contains errors (likely compilation errors), while the other file includes an onerror method without any issues. When you open the HTML file in a brows ...

javascripthtml

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

htmlcssratingsiblings

Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions: Here is the HTML code snippet: <div> &l ...

jqueryasp.netcssjqgrid

Ways to modify the screen when a click event occurs

To make the display block when clicking this icon: <div class="index-navi-frame-box"> <p onclick="expandFunction()"> <i class="fa fa-bars"></i> </p> </div> Here is what it should change to: <div class=" ...

javascripthtmlcss

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Target the CSS element with a specific class only if it is not the first child within its parent

In my coding project, I have created a div.container which contains multiple p elements. Some of these p elements have the class p.special. My goal is to select the p.special elements that are not positioned at the very top of the parent container (i.e., n ...

htmlcsscss-selectors

View 360-degree panoramas on an iPad using the krpano HTML

I am currently experimenting with the KRPano HTML5 panorama viewer for a specific page on tablets/iPads. The flash viewer works seamlessly on desktops: embedpano({ swf: "/Files/Flash/krpano.swf", xml: "/Files/Flash/view.xml", target: "panview", id: "krpan ...

javascripthtmlipadkrpano