Is there a way to align the top offset of a div with an outer div to match the side offset of the same outer div using just CSS?

Question

Is there a way to align the top offset of a div with an outer div to match the side offset of the same outer div using just CSS?

Let me show you a visual representation of what I'm trying to achieve for better understanding. There's an outer div that occupies 33% of the page and inside it, there's an inner div with a width of 50% in relation to the outer div. The outer div is styled with "text-align: center;" so that there is a 25% space on each side of the inner div. My goal is to align the inner div from the top of the page so that it has the same distance from the top as it does from the sides. Many suggestions I found online recommend using jquery for this, but I'd prefer a CSS-only solution if possible. How can I accomplish this?

I apologize if this seems like a basic question. I am relatively new to frontend development and haven't come across a way to set CSS attributes equal to other attribute values.

Any assistance would be greatly appreciated!

The CSS:

    .side{
        background-color: #ECEFF1;
        height: 100%;
        width: 33%;
        text-align: center;

    }

    .profpic{
        width: 50%;
        border-radius: 50%;
        position: relative;

    }

The Html:

        <div class="side mdl-shadow--4dp" >
            <image class="profpic mdl-shadow--4dp" src="/profpic.jpg"></image>

        </div>
        <div class="content">

        </div>

html css

Answer 1

Answer №1

To easily center an image, you can use the following two CSS rules: padding: 25% and width: 50%. This will ensure that the image is centered equally on all sides. Check out the code snippet below for reference:

HTML

<div id="side">
    <image src="http://placehold.it/120x120&text=image1" id="box">
</div>

CSS

#side {
    width: 33.33%;
    height: 1000px;
    background-color: #474747;
}

#box {
    width: 50%;
    padding: 25%;
}

You can also view a demo on JSFIDDLE.

EDIT

In relation to the original question, here is how the OP's CSS would look like:

.side{
    background-color: #ECEFF1;
    height: 100%;
    width: 33%;
}

.profpic{
    width: 50%;
    border-radius: 50%;
    padding: 25%;
}

Answer 2

To easily center an image, you can use the following two CSS rules: padding: 25% and width: 50%. This will ensure that the image is centered equally on all sides. Check out the code snippet below for reference:

HTML

<div id="side">
    <image src="http://placehold.it/120x120&text=image1" id="box">
</div>

CSS

#side {
    width: 33.33%;
    height: 1000px;
    background-color: #474747;
}

#box {
    width: 50%;
    padding: 25%;
}

You can also view a demo on JSFIDDLE.

EDIT

In relation to the original question, here is how the OP's CSS would look like:

.side{
    background-color: #ECEFF1;
    height: 100%;
    width: 33%;
}

.profpic{
    width: 50%;
    border-radius: 50%;
    padding: 25%;
}

Answer 3

Answer №2

By utilizing CSS3, you have the option to utilize the units vw and vh to accomplish this design.

vh corresponds to the height of the viewport, while vw pertains to its width.

In your scenario, the outer div occupies 33% of the width, with the inner box taking up 50% of that amount. Consequently, the margins on the left and right will be approximately 25% of the outer div's width.

To determine the top margin, you need to calculate 33% * 25% = 8.25% of the vw unit:

<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

#outer{
  background-color:red;    
  width:33vw;  
  margin:0;
  padding-top:1px;
  height:100vh;
}

#inner{
    background-color:blue;
    width:50%;
    margin: 0 auto;
    margin-top:8.25vw; // equivalent to 25% of 33% width
    padding-top:1px;
}

http://jsfiddle.net/xaLc4zd2/

Adjust the window size to observe how the inner div remains proportionally positioned.

Answer 4

By utilizing CSS3, you have the option to utilize the units vw and vh to accomplish this design.

vh corresponds to the height of the viewport, while vw pertains to its width.

In your scenario, the outer div occupies 33% of the width, with the inner box taking up 50% of that amount. Consequently, the margins on the left and right will be approximately 25% of the outer div's width.

To determine the top margin, you need to calculate 33% * 25% = 8.25% of the vw unit:

<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

#outer{
  background-color:red;    
  width:33vw;  
  margin:0;
  padding-top:1px;
  height:100vh;
}

#inner{
    background-color:blue;
    width:50%;
    margin: 0 auto;
    margin-top:8.25vw; // equivalent to 25% of 33% width
    padding-top:1px;
}

http://jsfiddle.net/xaLc4zd2/

Adjust the window size to observe how the inner div remains proportionally positioned.

Answer 5

Answer №3

Here's a helpful tip for your project. Make sure to set the box-sizing property on the 33% container and add a 25% margin to the element inside the container.

<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>

.box{
  width: 33%;
  min-height:400px;
  background-color: #777;
  display: inline-block;
  box-sizing: border-box;
}

.innerbox{
  width:50%;
  margin:25%;
  min-height:200px;
  background-color: #444;
}

Take a look at this codepen example.

Answer 6

Here's a helpful tip for your project. Make sure to set the box-sizing property on the 33% container and add a 25% margin to the element inside the container.

<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
</div>

.box{
  width: 33%;
  min-height:400px;
  background-color: #777;
  display: inline-block;
  box-sizing: border-box;
}

.innerbox{
  width:50%;
  margin:25%;
  min-height:200px;
  background-color: #444;
}

Take a look at this codepen example.

Is there a way to align the top offset of a div with an outer div to match the side offset of the same outer div using just CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Can you affix a tag to the picture?

When using the keyboard to navigate, the aria-label attribute is not being properly recognized

How to effectively manage an overflowing navigation bar

From jQuery integration to Wordpress - Frustrating uncaught errors are making me lose

Javascript: Harnessing Textbox Arrays for Improved Functionality

Having trouble with CSS Locator identifying an element in your Protractor Test?

Troubleshooting Problems with jQuery, Ajax, and iOS

Fill in a URL using the information provided in the boxes and navigate to the website

Tips for aligning a horizontal list in the center when the viewport size is reduced?

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

From plain to vibrant: Using CSS gradients for background design

Interactive button with jQuery that toggles between clicked and unclicked states, automatically reverting to unclicked when clicked elsewhere on the page

What is the best way to restrict ngFor loop in Angular?

Adjust the size of the font to suit your needs

Concealing a div element in JSP loop depending on a certain condition

Converting an HTML div to a string for export

Bootstrap 4 - The Mystery of 'col-sm-auto' Taking Precedence Over 'col-md-4'

Chrome bug where clicking a hover effect does not work

Switching Present Tab in Rails

Attempting to get a webGL game downloaded from Unity to automatically enter fullscreen mode