Position a <div> element in the center of another <div> element

Link to code: https://jsfiddle.net/z4udfg3o/

My goal is to center the "caixa" divs within the "produtos" div. Initially, I achieved this by using exact values with margin-left. However, I now want it to be responsive across different screen sizes, so I have set both margin-left and margin-right to auto.

Here is an image depicting the desired layout:

htmlcss

Answer №1

h1 {
  font-size: 2em;
  color: #333;
  text-align: center;
}

p {
  line-height: 1.5;
  margin-bottom: 1em;
}
<h1>Heading</h1>
<p>Paragraph text goes here.</p>

Answer №2

Here's the CSS code you can use:

.products {
    width: 100%;
    background-color: gray;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.box {
    width: 27.1%;
    height: 250px;
    background-color: darksalmon;
    border: 1px solid #000;
    float: left;
    margin: 0 3%;
}

Answer №3

Do you Like This?

.produtos {
  width: 100%;
  height: 252px;
  background: gray;
  text-align: center;
}
.caixa {
  width: 250px;
  height: 250px;
  background: darksalmon;
  border: 1px solid #000;
  margin: 0 auto;
}
<div class="produtos">
  <div class="caixa">
    <img src="imagens/croa.png" style="margin-left:60px;">
    <p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
  </div>
  <div class="caixa">
    <img src="imagens/dinheiro.png" style="margin-left:60px;">
    <p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
  </div>
  <div class="caixa">
    <img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
    <p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
  </div>
</div>

If not, I recommend checking out flexbox

Answer №4

To achieve this, follow the steps outlined below:

#container {
    background-color: #f1f1f1;
    padding: 5px; 
    text-align: center;
    width:100%;  
}

#box1, #box2, #box3 {
     background-color: #ddd;
     display: inline-block;    
     padding: 25px;
     width:30%;
}
<div id="wrap">
    <div id="box1">Content in Box 1</div>
    <div id="box2">Content in Box 2</div>
    <div id="box3">Content in Box 3</div>
</div>

Answer №5

Consider adjusting your CSS code as shown below:

.items
    {
        width: 100%;
        height: 252px;
        background-color: gray;
        text-align: center;
    }

.box
    {
        width: 250px;
        height: 250px;
        background-color: darksalmon;
        border: 1px solid #000;
        display: inline-block; 
    }

Answer №6

The orange boxes in the following code are set to display: inline-block, allowing them to flow with the text alignment of center in their parent container. This responsive design ensure that the boxes adapt to the available screen space, appearing side by side on wide screens and vertically stacked on smaller ones.

To eliminate unwanted margins caused by newlines between the boxes, I made some modifications to the HTML structure.

.produtos
    {
        width: 100%;
        background: gray;
        text-align: center;
    }
    
.caixa
    {
        vertical-align: top;
        width: 250px;
        height: 250px;
        background: darksalmon;
        border: 1px solid #000;
        display: inline-block;
    }
<div class="produtos">
        <div class="caixa"> 
            <img src="imagens/croa.png" style="margin-left:60px;">
            <p style="text-align:center;">Temos os melhores produtos do mercado! Nossos competidores ajoelham-se perante a nossa qualidade!</p>
        </div
        ><div class="caixa">
            <img src="imagens/dinheiro.png" style="margin-left:60px;">
            <p style="text-align:center;">Preços mais baratos do mercado! Promoções 24/7! Se houver ofertas mais baratas diga e fazemos promoção de 0.01€!</p>
        </div
        ><div class="caixa">
            <img href="#" src="imagens/definicoes.png" style="margin-left:60px;">
            <p style="text-align:center;">Nosso departamento de apoio ao cliente está ativo 24/7! Resolveremos todas as suas dúvidas!</p>
        </div>
    </div>

Answer №7

I trust it will be beneficial for you. I included a row div class for each one so that you can adjust the padding in the highlighted text class row.

.produtos
    {
        width: 100%;
        height: 252px;
        }
    
.caixa
    {
        width: 33%;
        height: 100%;
        background: darksalmon;
        border:1px solid red;
        float: left; 
    }
  .row{
        height:100%;
        padding:0 20px;
}
<div class="produtos">
        <div class="caixa"> 
        <div class="row">
            <img src="imagens/croa.png">
            <p style="text-align:center;">We have the best products on the market! Our competitors bow down to our quality!</p>
        </div>
          </div>
        <div class="caixa">
        <div class="row">
            <img src="imagens/dinheiro.png">
            <p style="text-align:center;">Cheapest prices in the market! Promotions 24/7! If there are cheaper offers, let us know and we will match it with a promotion of 0.01€!</p>
        </div> </div>
        <div class="caixa">
          <div class="row">
            <img href="#" src="imagens/definicoes.png">
            <p style="text-align:center;">Our customer support department is active 24/7! We will resolve all your queries!</p>
        </div> </div>
    </div>

Answer №8

To ensure that boxes can contain images or other content while maintaining a fixed aspect ratio, you can use the following method:

.container{float:left; width:100%; background-color:deeppink;}
.small-box{float:left; width:22%; margin:0 5.665%; background-color:bisque;}
.fit-content{float:left; width:100%; margin-top:100%;}
    <div class="container">
        <div class="small-box">
            <div class="fit-content"></div>
        </div>
        <div class="small-box">
            <div class="fit-content"></div>
        </div>
        <div class="small-box">
            <div class="fit-content"></div>
        </div>
    </div>

Answer №9

It's important to ensure that the width of both the "caixa" and "produtos" divs is balanced. Using percentages could make it more responsive across different screen sizes.

Click here for the Fiddle link

I hope the Fiddle link will be helpful for you.

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

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

javascripthtmlangularjsjson

What are some ways I can ensure that my personalized bootstrap navbar adjusts to different viewport sizes?

I've created a custom navbar that fits perfectly on a screen that is 1300 pixels wide by 700 pixels high. https://i.sstatic.net/nOm0c.png However, when the viewport size is reduced, the navbar elements become misaligned: https://i.sstatic.net/zBqpQ ...

htmlcssbootstrap-4

Tips for arranging two svg elements next to each other within a larger div

Hey everyone, I've been working on some HTML and JavaScript but I'm stuck on a basic issue. I have a simple code with a div containing two inner divs, each with an SVG element equal to the size of the parent div. My goal is to have these two inne ...

htmlsvg

Unable to showcase Mysql search outcomes in a distinct div section

I have been working on a project to showcase MySQL results by utilizing three different sections/divisions. In Division 1, there are radio buttons that allow for selecting and viewing the results based on different criteria. Division 2 contains text indica ...

javascriptphphtmlmysql

Is there a way to convert an HTML string into an HTML DOM without the need for scripts or images to

Upon receiving an HTML document as a string from the server via an Ajax call, I now need to modify certain parts of it and send it back to the server. This involves altering attributes and values (such as style="", src="", href="") and changing innerHTML e ...

jqueryhtmlxmlparsingdom

Is there a glitch in Safari's CSS involving max-height?

Currently, I am in the process of developing a popup for a registration form. The CSS rules have been configured accordingly and after testing on various browsers, it has come to my attention that Safari is displaying an additional white space between elem ...

csssafari

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

jqueryhtmlcssdatatable

JavaScript encoding and decoding challenges

Can anyone help me figure out what's wrong? I'm trying to encode and decode a simple input, but it just doesn't seem to work! Any ideas why? Thanks in advance for your assistance :) ENCODE: function encryption_encode(s, delta) { var te ...

javascripthtmlcssdecodeencode

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...

cssangularexif

Struggling to display the inline navbar

For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem. The crux of the ...

cssruby-on-railshtml

Getting the list items separated from the unordered list in Selenium

My current task involves navigating a list and selecting the correct text entry. The list contains only 2 items: <ul> <li><span>first</span></li> <li><span>second</span></li> </ul> However, ...

javahtmllistseleniumhtml-lists

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

htmlcss

Can the conventional HTML context menu be swapped out for a link context menu instead?

Currently, I am working on developing a custom linkbox component that is similar to the one found on this page: Here is an example of the code: export const Linkbox = ({}) => { const linkRef = useRef(null); return ( // eslint-disable-next-l ...

javascripthtmlcontextmenu

Using jQuery.post to select and manipulate the target div displaying Google search results

I am trying to implement a custom form and display the results in a specific target DIV ('results') using ajax. However, I am facing difficulties and unable to figure out what is going wrong. Even after referring to this demo (https://api.jquery ...

jqueryajaxhtmltarget

Employing the Confirm() function within the onbeforeunload() event

Is there a way to prompt the user with a confirmation box before exiting a page using JavaScript? If the user clicks "OK", a function should be executed before leaving the page, and if they click "Cancel", the page should remain open. window.onbeforeunloa ...

javascripthtml

What is the correct way to format the headings for sub-level pages, like chapters within a novel or sections within a lengthy article?

At times, the text and image content becomes too expansive to fit on a single page. However, preserving the context of the content is crucial, making it necessary to display it explicitly from a user experience perspective. This could include chapters of a ...

htmlseosemantic-markup

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

Incorporating fontawesome icons ABOVE custom menu items in WordPress

In the process of customizing a menu in WordPress, I am looking to add fontawesome icons above each list item. In the past, I achieved this using the following code: <ul> <li> <a href="#"> <i class="fa fa-home"></i&g ...

phpcsswordpresslistmenu

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

htmlcss

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face