I have 4 divs and I need to make sure that 2 of them are centered

I currently have a setup with four divs within a container structured as follows:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

My goal is to align the first and last divs to the edges of the screen, while centering only the two middle divs. Despite my attempts with display inline-block and margin adjustments, I am facing difficulty in achieving this layout. Any guidance on how to accomplish this would be greatly appreciated!

Many thanks,

htmlcsscontainerscenterinline

Answer №1

Utilize the following HTML

<div class="container">
    <div class="block left">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block right">4</div>
</div>

and then apply this CSS styling

.container {
    display:block;
    text-align:center
}
.block {
    display:inline-block;
    border:1px solid #000;
    padding:10px;
    margin:auto
}
.left {
    float:left
}
.right {
    float:right;
}

You can also make use of first-child and last-child, but using additional classes on the first and last div is a simpler approach.

View the fiddle here

Answer №2

One helpful tip is to utilize the :nth-of-type() pseudo-class which enables you to target elements using a specific formula, like demonstrated in this example: http://jsfiddle.net/csdtesting/11fh7suy/

//styling the second div    
div.container div:nth-of-type(2) {
        background-color: #9999ff;
        text-align:center;
    }
//styling the third div
    div.container div:nth-of-type(3) {
        background-color: #9999ff;
         text-align:center;
    }

I hope this information proves helpful!

Answer №3

To have more precise control, consider incorporating an additional container:

<div class="container">
    <div class="box">1</div>
    <div class="wrapper">
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <div class="box right">4</div>
</div>

.wrapper{width:50px;margin:0 auto}
.box{float:left;width:25px;text-align:center}
.right{float:right}

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

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Is there a way to ensure consistent display of UTF-8 arrow characters across all browsers? I have experimented with various font sizes like px and pt, as well as using HTML Entity codes (e.g. &#9664;) but unfortunately the arrows still show difference ...

htmlcssutf-8

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

I am facing an issue with text wrapping within a flexbox. I want the width of the flex item to always match the length of the wrapped text so that an icon placed next to the item stays adjacent to the text. However, due to text wrapping, there is a gap bet ...

htmlcssflexbox

Unable to display keyboard on HTML input form in webview

Can someone assist me with displaying and allowing the keyboard to show and input properly? In my simple app, I have a main screen with buttons. When a button is clicked, it opens a webview. One of the buttons opens a webview to an HTML page with an input ...

androidhtmlkeyboardwebview

Quiz timer using JavaScript

In my HTML and JavaScript project, I am creating a quiz game where players have 15 seconds to answer each question. To implement this timer feature, I used the following code snippet: <body onload="setTimeout(Timer,15000)"> Implemented in JavaScrip ...

javascripthtmldom

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

javascripthtmlangularjs

Generating values in a loop - mastering the art of creating data points

My goal is to create a variable within a loop: box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFand so on... The concept is simple: box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff. I attempted to achieve this ...

cssless

Manipulate React class names by adding or removing them

Is there a way to toggle a className on click to change the style of a component? https://i.sstatic.net/z9FoA.png I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;. I also require t ...

cssreactjsmaterial-uimakestyles

Is there a way to remain on the current page in WordPress after submitting a contact form?

I recently developed a personalized contact form within WordPress, utilizing PHP. The completed form successfully sends emails, but I am encountering an issue when users hit submit; instead of staying on the original page, they are redirected to a post pag ...

phpjqueryhtmlwordpressforms

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

The CSS hover animation functions smoothly in CodeSandbox using React, but encounters issues when integrated into a Next.js project

Challenge Here, in my codesandbox project, I created a hover animation for a div element. When I implemented the code on a li element in my next.js project, the hover effect is triggered not on hover, but on click. Additionally, the element remains in the ...

cssanimationnext.js

"Experience the mesmerizing transition effects of Angular Bootstrap tabs as they gracefully glide in

I am currently working on implementing an animated slide effect when switching between tabs on a webpage. However, I have encountered some difficulties as the animation only seems to work partially. My approach involves using animate.css with the expectat ...

cssangularjstwitter-bootstrapanimation

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of

I am currently working on a website where the navigation bar spans the entire width and remains fixed in place. Below the navigation bar is a cover image, followed by the main content section. As you scroll down, the navigation bar covers the image from t ...

javascripthtmlcss

Angular onscroll event creating a parallax effect

I attempted to create a parallax effect using Angular and the OnScroll event, however, while scrolling, the text seems to be flickering. Is there a way to make the smooth rendering onscroll? Maybe through CSS alone? Here is the script I used: https://sta ...

cssangularparallax

"Pressing the 'back' button on your browser takes

Is there a way to navigate back to the main page by clicking on an image? After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices? <a href="picture1.jpg"> <h3>First</h3></a> <a ...

javascripthtmlcss

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

jqueryhtmlcss

What is the process for adjusting the horizontal position of a flexbox using CSS?

Currently experimenting with flexbox to better understand its functionality. I have created the following layout: https://i.sstatic.net/rxvFD.png using the code provided below: .container-1 { display: flex; flex-direction: row; } .container-1 div ...

cssflexbox

Creating CSS-style overlayed images that are resizable

I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...

htmlcss

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...

cssimagecodeignitercodeigniter-3dompdf

Looking for a list that you can edit with CSS styling?

I'm struggling to create a flexible list that can be easily modified. My goal is to have an ordered list with unique labels such as 1,2,3,4,5,6,7,8,9,0,A,B,!,# Although I've managed to number the list items, I am stuck on adding the extra label ...

jquerycsslist

Exploring methods to modify the style attribute of a div tag in .NET

Using .NET, we need to access the CSS style of a div and input certain values in the code behind on page load. Since the div is located on the master page and this is another separate page, we are unable to add RUNAT="SERVER" to the div. ...

c#css.net