/    Sign up×
Community /Pin to ProfileBookmark

Help with draggable html div

Copy linkTweet thisAlerts:
Aug 06.2021

I have a draggable html div, that works/drags successfully, however I’d like it to display in the center when the page loads, but it is currently displays in the top left when the page loads. Here’s my current code:

“`
.draggable-div {
position: absolute;
display: flex;
margin: 0 auto;
height: 50%;
align-items: center;
}

#box {
position: absolute;
margin: 0 auto;
align-items: center;
width:100%;
height: 35vw;
font: 35px arial;
line-height: 1.5;
background-color: transparent;
}

<div class=”draggable-div”>
<div id=”box”>
text text text </br>
text text text </br>
text text text
</div>
</div>
“`

any help is appreciated

to post a comment
CSSHTML

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@BusinessANDwebAug 07.2021 — Hey chrjs. I think its because of the "position:absolute;" on the #box. Try to take it off. Then set "justify-content:center;" on the .draggable-div for the #box item. If you don't want to remove the "position" on the #box div. Then simply use "left:50%;" it will place the #box div in the middle of the parent element. You wouldn't need the "flex" property on the .dragable-div anymore.
×

Success!

Help @chrisjchrisj spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...