skyguy skyguy - 6 months ago 22
HTML Question

CSS: place three.js within circular div?

I am trying to place multiple divs in a line horizontally across the screen with with three.js animations WITHIN them, as in the circular div is the parent to the div containing the three.js. Ultimately I want these circles to be able to scroll horizontally across my screen.

I have succeeded in creating a horizontal lineup of circular divs and partially placing my three.js div within them, however I am unable to center my animation within the parent circular div and am having issues achieving a perfect circle. I'm new to this and am having trouble finding the best way to achieve this. Here is what I have so far:
CSS:

.circle {
display: table;
border-radius: 50%;
position: absolute;
margin: 50px auto;
background-color: lightgray;
height: 100px;
width: 0;
}
#planet {


vertical-align: middle;
text-align:center;
left:10%;
position:relative; /*makes left effective*/
display:table-cell;
}


HTML:

<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
<a href="">
<ul>
<div class ="circle">
<div id ="planet"></div>
</div>
</ul>
</a>
</div>
</div>
<script src="js/lowpolyPlanets.js"></script>
</body>


This is what this creates:
enter image description here

What am I doing wrong here?

Answer

To have a perfect circle, you have to set the height and width the same value (as my example). For the other issue, setting the left property push it on right, but without the JS code of your "planet", it would be hard to solve.

.circle {
    display: table;
    border-radius: 50%;
    position: absolute;
                margin: 50px auto;
                background-color: lightgray;
                height: 100px;
                width: 100px;
}
#planet {


    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}
<div class="wrapper" style="background-color:lightgrey;">
<div class="container">
<h1 id="titleHead">Projects</h1>
    <a href="">
        <ul>
        <div class ="circle">
        <div id ="planet"></div>
        </div>
        </ul>
    </a>
</div>
</div>