StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POcenter and position elements in CSS
primarykey
Id
19940990
data
AcceptedAnswerId
19951023
AnswerCount
3
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-11-12T22:10:42.033
FavoriteCount
0
LastActivityDate
2013-11-14T08:11:20.703
LastEditDate
2013-11-12T22:56:49.243
LastEditorUserId
836697
OwnerUserId
836697
ParentId
0
PostTypeId
1
Score
0
ViewCount
114
LastEditorDisplayName
text
Body
<p>I'm stuck with my HTML/CSS code where I need to <strong>horizontally center</strong> two divs (A, B) with background images in one absolutely positioned div (C). </p> <p>Bering in mind that:</p> <ul> <li>bottom edge of larger div (A) needs to be at the bottom of (C). </li> <li>top edge of (A) needs to be at the top edge of (B).</li> <li>(B) needs to be behind (A) - which needs the same <code>position</code> property, I think.</li> <li>number of added inner div elements to the (C) div is not restricted</li> </ul> <p>Here is my fiddle where I managed to position the (A) div inside the (C) <a href="http://jsfiddle.net/meridius/DGexR/" rel="nofollow noreferrer">http://jsfiddle.net/meridius/DGexR/</a> But no matter what I do, I can't accomplish the rest.</p> <p><strong>EDIT:</strong><br> Here is how it should look like <img src="https://i.imgur.com/duKBXVS.png" alt="enter image description here"></p> <p><strong>Code preview:</strong><br> <em>For working example (with background images) please see above mentioned fiddle.</em></p> <p>HTML</p> <pre><code><div class="desk"> <div class="figure"> <div class="type sprites-sachy sprite-WKing"></div> <div class="special sprites-sachy sprite-halo"></div> </div> </div> </code></pre> <p>CSS</p> <pre><code>.desk { /* this class must not be touched */ position: absolute; top: 129px; left: 202px; border: 1px solid #FF0000; width: 65px; height: 65px; padding: 0; float: left; } .figure { bottom: 0; left: 50%; position: absolute; } .type { margin-left:-50%; z-index:2; } .special { border: 1px solid #008000; z-index:1; /* display:none; uncomment this to see .figurka centered how it is supposed to */ } </code></pre> <hr> <p><strong><em>NOTE:</em></strong><br> <em>I'd like to avoid this question being closed as too localized, so let me state first that I believe that I'm not the only one having problems positioning (and centering) elements in CSS.</em></p>
Tags
<css><html><background-image><css-position>
Title
center and position elements in CSS
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USmeridius
UserOwnerUserId
1. USmeridius
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.