Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ul> <li><h3>Approach 1 - <code>transform</code> <code>translateX</code>/<code>translateY</code>:</h3> <p><a href="http://jsfiddle.net/47x60k4w/"><strong>Example Here</strong></a> / <a href="http://jsfiddle.net/47x60k4w/show"><strong>Full Screen Example</strong></a></p> <p>In <a href="http://caniuse.com/#feat=transforms2d">supported browsers</a> (most of them), you can use <code>top: 50%</code>/<code>left: 50%</code> in combination with <code>translateX(-50%) translateY(-50%)</code> to dynamically vertically/horizontally center the element.</p> <pre><code>.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } </code></pre></li> </ul> <hr> <ul> <li><h3>Approach 2 - Flexbox method:</h3> <p><a href="http://jsfiddle.net/yeaqrh48/"><strong>Example Here</strong></a> / <a href="http://jsfiddle.net/yeaqrh48/show"><strong>Full Screen Example</strong></a></p> <p>In <a href="http://caniuse.com/#feat=flexbox">supported browsers</a>, set the <code>display</code> of the targeted element to <code>flex</code> and use <code>align-items: center</code> for vertical centering and <code>justify-content: center</code> for horizontal centering. Just don't forget to add vendor prefixes for additional browser support (<a href="http://jsfiddle.net/yeaqrh48/">see example</a>).</p> <pre><code>html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; } </code></pre></li> </ul> <hr> <ul> <li><h3>Approach 3 - <code>table-cell</code>/<code>vertical-align: middle</code>:</h3> <p><a href="http://jsfiddle.net/sa088kb0/"><strong>Example Here</strong></a> / <a href="http://jsfiddle.net/sa088kb0/show/"><strong>Full Screen Example</strong></a></p> <p>In some cases, you will need to ensure that the <code>html</code>/<code>body</code> element's height is set to <code>100%</code>.</p> <p>For vertical alignment, set the parent element's <code>width</code>/<code>height</code> to <code>100%</code> and add <code>display: table</code>. Then for the child element, change the <code>display</code> to <code>table-cell</code> and add <code>vertical-align: middle</code>.</p> <p>For horizontal centering, you could either add <code>text-align: center</code> to center the text and any other <code>inline</code> children elements. Alternatively, you could use <code>margin: 0 auto</code>, assuming the element is <code>block</code> level.</p> <pre><code>html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent &gt; .child { display: table-cell; vertical-align: middle; } </code></pre></li> </ul> <hr> <ul> <li><h3>Approach 4 - Absolutely positioned <code>50%</code> from the top with displacement:</h3> <p><a href="http://jsfiddle.net/2epdqL5g/"><strong>Example Here</strong></a> / <a href="http://jsfiddle.net/2epdqL5g/show"><strong>Full Screen Example</strong></a></p> <p>This approach assumes that the text has a known height - in this instance, <code>18px</code>. Just absolutely position the element <code>50%</code> from the top, relative to the parent element. Use a negative <code>margin-top</code> value that is half of the element's known height, in this case - <code>-9px</code>.</p> <pre><code>html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container &gt; p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; } </code></pre></li> </ul> <hr> <ul> <li><h3>Approach 5 - The <code>line-height</code> method (Least flexible - not suggested):</h3> <p><a href="http://jsfiddle.net/6onex7jf/"><strong>Example Here</strong></a></p> <p>In some cases, the parent element will have a fixed height. For vertical centering, all you have to do is set a <code>line-height</code> value on the child element equal to the fixed height of the parent element.</p> <p>Though this solution will work in some cases, it's worth noting that it won't work when there are multiple lines of text - <a href="http://jsfiddle.net/6rvdxbt9/">like this</a>.</p> <pre><code>.parent { height: 200px; width: 400px; text-align: center; } .parent &gt; .child { line-height: 200px; } </code></pre></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POHow to center an element horizontally and vertically?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJosh Crozier
    1. USJosh Crozier
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to center an element horizontally and vertically?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYes that works. I had already used to inline-flex on css3 so I completely forgot about how to take this aproach correctly. I really appreciate it, thank you very much.
      singulars
      1. PO
      1. USshuji
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload