Alignment of Material within Two Adjacent Divisions

I'm having trouble centering the content within two side-by-side divs.

It seems like the content in each of these divs is centering towards one another, which is not what I want.

I've created a main container and placed two divs inside it. The text is aligned to the center but I can't figure out how to center the content inside the divs themselves.

Any suggestions?

https://i.stack.imgur.com/C5iBB.jpg

.div-header-seller-resources{
    font-size:30px;
    line-height:32px;
    margin-bottom:10px;
}
.div-detail-seller-resources{
    font-size:20px;
    line-height:22px;
    margin-bottom:45px;
}
.div-main-container-seller-resources{
    width:100%;
}
.div-main-container-seller-resources{
    margin-top:20px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.div-seller-resources-left{
    width: 300px;
    display: flex;
    text-align:center;
}
.div-seller-resources-right{
    width: 350px;
    display: flex;
    text-align:center;
}
.seller-resources-height{
    height: 125px;
}
<div class="div-main-container-seller-resources">
    <div class="div-seller-resources-left" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
            <div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
          </div>
            <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/referrals/">Referrals</a></div>
            <div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
        </div>
        <div class="clear"></div>
         <div class="seller-resources-height">
                <div class="div-header-seller-resources"><a href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
            <div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
         </div>
        <div class="clear"></div>
    </div>
    <div class="div-seller-resources-right" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
            <div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/advanced-product-shipping/">Advanced Shipping &amp; Product Options</a></div>
            <div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard &amp; Payment</a></div>
            <div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
        </div>  
        <div class="clear"></div>
    </div>
</div>
    
<div class="seller-overview-button-container">
<a href="http://yodega.com/sell"><button id="button2" type="button contact-button">Seller Overview</button></a>
</div>

htmlcss

Answer №1

To enhance the layout, include an additional outer container div and apply this CSS rule.

.container{
display:flex;
Justify-content:center;
}

Next, style the inner div as follows:

.inner {
display: flex;
flex-direction:row;
}

Incorporate the following structure in Pug format:

div(class="container ")
    div(class=" inner")
        div my_left
        div my_right

Adjust the width of the left and right divs accordingly to refine the design.

Answer №2

To center the child elements inside a parent div, apply CSS to the text-center class of the parent, and utilize margin:0px auto; for the child div. This technique will effectively align each child element in the center of the containing 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

Switch the Header Image on a Page in WordPress

I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want. Attached below is a scre ...

csswordpresswordpress-theming

The JQuery duplication process did not function as anticipated

This question builds on a previous one related to jQuery cloning and incrementing IDs. The issue is that when adding new elements, the IDs are not being generated in the correct sequence. For example, if the initial ID is expy-1, clicking "add more" should ...

javascriptjqueryhtml

Enhance the appearance of your Dojo TabContainer when viewing in Internet Explorer

Firefox seems to handle the following code without any issues: < div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%"> < div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%"> {% for row ...

cssinternet-explorerdojotabcontainerdijit.layout

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Endless scrolling feature malfunctioning

On my profile_page.php, the default setting is to display 10 posts (10 rows from the database) for the user. If a user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to reveal the remaining posts (maximum of 10). For e ...

javascriptphpjqueryhtmlajax

Creating an inner shadow effect for geometric shapes with text inside - a step-by-step guide!

Is it possible to apply an inner shadow to geometric shapes with text inside using CSS? This is the effect I want to achieve: https://i.stack.imgur.com/XcGS2.png I followed the code provided in this thread: Required pentagon shape with right direction ...

htmlcss

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Angular 2: Emptying input field value on click event

I am experiencing an issue with resetting my input values. I have a search bar with filter functions. When I enter a value, it displays a list below and I want to add a function to these links. When I click on one of them, it takes me to another component ...

javascripthtmlangulartypescript

Using the <script> attribute within the <head> tag without the async or defer attributes

https://i.stack.imgur.com/cRFaR.pngCurious about Reddit's use of the async or defer attribute in the script tag. Are there situations where blocking the parser is necessary? ...

javascripthtmlbrowser

Can you use "or" or "not" syntax with CSS input type selectors?

In the world of programming, if they actually exist, Suppose I have created an HTML form with the following input fields: <input type="text" /> <input type="password" /> <input type="checkbox" /> I wish to style all input fields that a ...

htmlcsscss-selectors

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Hover over two different divs with JQuery

I have a situation where I have two HTML table rows. When I hover over the first row, I want to display the second row. However, once the mouse leaves both rows, the second row should be hidden. Is there a way to achieve this using JQuery? <tr class=" ...

javascriptjqueryhtmlcss

Managing the order of rows in Bootstrap specifically for mobile devices

Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens: Here is the code responsible for rendering the above layout: <div class="container"> <div class="row"> <div class="col-md-4" ...

htmlcsstwitter-bootstrap

Tips on adjusting the label on a datetime-local button

While using mobile browsers, I noticed that the datetime local feature includes three buttons. One of these buttons is called the Set button, but I would like to change its name to Ok. Is there a way to do this? I tried looking for solutions but couldn&apo ...

javascripthtml

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

javascriptcssreactjsmenuitemantd

Differences in performance between Angular and JQuery_execution times

I am facing an issue on my dynamically populated Angular page. Angular sends a request to the backend using $http.get to retrieve data which then populates attributes of a controller. For example, when I call $http.get('/_car_data'), the JSON re ...

javascriptjqueryhtmlangularjs

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

csshtml

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

javascripthtmlangularjs