Position the div elements at the center

I am facing an issue with aligning elements inside a div both vertically and horizontally. I have tried various CSS methods like margin auto, but none seem to work. If you could provide a solution and explain how it works, it would be greatly appreciated. Thank you.

<div id="tiritaContainer">
    <div class="tirita">
        <div class="tiritas"><img id="tirita1" src="assets/pictures/Front house.jpg" alt=""/></div>
        <div class="tiritas"><img id="tirita2" src="assets/pictures/28.jpg" alt=""/></div>
        <div class="tiritas"><img id="tirita3" src="assets/pictures/27.jpg" alt=""/></div>
    </div>
    <img class="next" src="assets/pictures/arrow-right.png" alt=""/>
</div>

* {
    margin: 0px;
    padding: 0px;
}

nav {
    position: absolute;
    left: 0px;
    width: 100%;
    background-color: #3333ff;
    height: 40px;
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.nav li {
    text-align: center;
    list-style-type: none;
    float: left;
    width: 150px;
}

.nav li a {
    text-decoration: none;
    text-align: center;
    font-size: 150%;
    color: yellow;
    line-height: 40px;
    display: block;
}

.nav li a:hover {
    background-color: chartreuse;
    color: black;
}

#logo {
    width: 20%;
    border-radius: 35%;
    margin-top: auto;
    margin-bottom: auto;
}

#mainImg {
    height: 65vh;
    width: 50vw;
    border: 3px solid black;
    margin-left: auto;
    margin-right: auto;
}

.tirita {
    margin: 0 auto;
    height: 105px;
    width: 400px;
}

#gallery img {
    display: none;
}

.tiritas img {
    height: 100px;
    width: 100px;
    border: 3px solid blue;
    float: left;
}

.tiritas:hover {
    cursor: pointer;
    border-color: red;
    transform: scale(1.5);
}

center {
    padding: 2%;
}

.prev, .next {
    vertical-align: middle;
}

.prev {
    float: left;
    margin: 0 auto;
}

.next {
    float: right;
}

#tiritaContainer {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

I am trying to align the left and right arrow in the same row at the center both vertically and horizontally.

Answer №1

If you're looking to create a simple layout, flexbox is the way to go. All you need to do is use display:flex along with justify-content:center for horizontal alignment and align-items:center for vertical alignment.

*{box-sizing:border-box}
.container{width:100%;display:flex;justify-content:center;align-items:center;border:1px red solid}

img{display:block;width:100px;margin:10px}
<div class="container">
    <img src="http://via.placeholder.com/100x150/fff000" alt="">
    <img src="http://via.placeholder.com/100x100/ff0000" alt="">
    <img src="http://via.placeholder.com/100x120/0000ff" alt="">
</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

Is there a way to organize a specific column based on user selection from a drop down menu on the client side?

When selecting Timestamp from the drop-down menu, I expect the TimeStamp to be sorted in either ascending or descending order. Similarly, if I choose Host, the Host should be sorted accordingly. Despite using the Tablesorter plugin, sorting doesn't s ...

How can jQuery be used to convert an ID into a string?

Currently, I am working with a jQuery function that interacts with an API and retrieves some data. Within this data, there is a specific piece of information that I need to manipulate. My goal is to replace instances where teamId = 100 with "Blue Team" an ...

Creating multiple tables in an HTML template using loops, either with or without JavaScript, each table identical to the one previously created

<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...

Varied selection menu feature

Looking to build a new component: The idea is to create something similar to a dropdown list. I aim to incorporate this component into every cell (td) of table rows. The challenge lies in displaying the second div (item list) under the first div, but abov ...

Use Bootstrap to effortlessly arrange columns horizontally in a row

I'm facing a scenario where I need to arrange the columns in a row horizontally. The challenge is to ensure that the row expands horizontally to fit the columns. I attempted to use white-space: nowrap on the row, remove floats on columns, and set the ...

Struggling to align button text vertically in the center

I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...

How to make a routerLink clickable within an anchor tag in Angular 6

I am facing a peculiar issue with a group of hyperlinks. html <div class="col-12 navlinks"> <div class="text-center"> <div class="justify-content-center"> <a class="col-auto d-inline-block whitelink" rou ...

Looking for a way to connect a background image in Vue CLI?

When running the code below, I encounter an issue. The code runs properly but the images are not displaying and instead showing the URL as unknown. How can I fix this problem? The images definitely exist. <template> <div class="slider">< ...

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

I'm encountering difficulties in automatically populating the category field from an API

Hey there! I have set up a signup form and I am trying to automatically fetch categories from the server API to populate an input area. Everything seems to be in place, but for some reason, I am unable to retrieve the data. API: Here is the code I'm ...

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...

Retrieve the child DIV element within its sibling without using an identifier

I have a setup similar to the following: <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Tiger128 (v2)</h3> </div> <div class="panel-body"> <inp ...

Modifying linked dropdown selections with jQuery

I'm trying to create a recurrent functionality where I have 3 select elements. When the first select is changed, it should update the second and third selects accordingly. If the second select is changed, then it should also affect the third select. ...

Tips for dynamically populating an HTML table with data from a JSON array using JQuery

I have generated an HTML table <table id="top_five_table"> <tr> <td> </th> <th>URL</th> <th width="90">Total Hits</th> <th width="380">Percentage of all Hits</th> </tr> <tr> ...

JavaScript - Modify the proposed content prior to inserting it into the input field

In my current project, I have implemented a feature using jQuery UI - v1.11.4, where an HTML textbox utilizes a JavaScript autocomplete functionality. The suggested string for the textbox is created by concatenating several columns (patient_no, patient_nam ...

dynamically passing arguments to an onclick function

I am experiencing an issue with the following HTML element that has an onclick() function dynamically attached. When trying to call the function, it throws an error stating that "ST" is not defined. The variable passed as name is something like "ST-123". C ...

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...