All geek questions in one place

I am trying to center divs inside another div

Here is a sample that I work with. I would not want to use javascript if possible, and if it is absolutely necessary without any other solutions, I would use jQuery.

As an example, there are three internal divs that I'm trying to focus on. They are ultimately generated by the script, so I don’t know the width or height for using a negative pixel size for the field in the .circle class.

I would like to change the structure of the div, but I am looking for something clean and simple, although I would rather change the structure than using javascript.

FF4, Safari (iOS) / Chrome, IE9 are my ultimate goals.

change

This is the end result I need, but its using jquery.

Dan's answer will work. It puts the strain on generating a script to calculate negative fields. That would be acceptable, after all, I think, but I was hoping that all I would need to provide would be the desired size, and not any information related to the positioning from the script generator.

@thirtydot - Right now, no. I am coding manually. in the end it will be generated by PHP or C # depending on my server platform.

+4
source share
3 answers

Create negative fields in the same place as the dimensions:

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> .container { position: relative; width: 500px; height: 500px; border: 1px solid yellow; } .circle { position: absolute; -moz-border-radius: 100%; border-radius: 100%; top: 50%; left: 50%; } .white { border: 1px solid White; } body { background-color: black; } </style> </head> <body> <div class="container"> <div class="circle white" style="width: 100px; height: 100px; margin-top:-50px; margin-left: -50px"></div> <div class="circle white" style="width: 200px; height: 200px; margin-top:-100px; margin-left: -100px"></div> <div class="circle white" style="width: 400px; height: 400px; margin-top:-200px; margin-left: -200px"></div> </div> </body> </html>
+4
source

Center with margin: 0 auto .

You do not need to know the width ahead of time if they set explicitly.

0
source

Well, if it comes to this, here are some jQuery steps to complete the task.

 $(".circle").each(function(){ $(this).css({top: -$(this).height()/2, left: -$(this).height()/2 }); });

Demo: jsfiddle.net/Marcel/7ucme

0
source

Source: https://habr.com/ru/post/1345283/

More articles:


All Articles