Databases
StackOverflow2013
Postsdbo
POLinks do not centre as required
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLinks do not centre as required
    primarykey
    data
    text
    <p>I'm having trouble aligning "buttons" in my pages, which are actually just text links that are made to look like buttons using CSS. It is used within an unordered list (see HTML below).</p> <p>The responsible CSS code is here:</p> <pre><code>ul.cms { width: 85%; margin: 0px auto !important; text-align: center; } ul.cms li { width: 24.99%; float: left; background: none !important; padding: 0px !important; margin: 0px ; text-align: center; color: #666 } ul.cms .has-icon { margin: auto; display: block; background-position: center top; background-repeat: no-repeat; padding-top: 140px; margin: 0px 8px; } a.ja-typo-btn { display: inline-block; text-decoration: none; white-space: nowrap; border: none; color: #333; background: none; text-align: center; } a.ja-typo-btn:hover, a.ja-typo-btn:active, a.ja-typo-btn:focus { border: none; background-position: bottom; color: #333; } a.ja-typo-btn-big { text-align: center; border: none; font-size: 110%; line-height: normal; font-weight: normal; } a.ja-typo-btn-big span { padding: 15px 23px; border: none; display: inline-block; text-align: center; } a.btn-green { background-color: #74af57 !important; border: none; } a.btn-green:hover, a.btn-green:active, a.btn-green:focus { border-color: #74af57; color: #fff; } a.btn-green span { border: none; } </code></pre> <p>With the following HTML Code (I've cut out unnecessary text information as seen in the image below) :</p> <pre><code>&lt;ul class="cms clearfix"&gt; &lt;li&gt; &lt;a class = "has-icon icon1" href = "barista-course-melbourne/espresso-basics" target = "_parent"&gt;&lt;/a&gt; &lt;a class = "ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/espresso-basics" target="_parent" style="text-align: center; display: inline-block;"&gt; &lt;span&gt;COURSE INFO&lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>And renders in a mobile device like this where the button is not centred.</p> <p>Here's a screenshot:</p> <p><img src="https://i.stack.imgur.com/OXhAJ.jpg" alt="enter image description here"></p> <p>Any insight and help will be much appreciated.</p> <p>This is the full HTML code I've used:</p> <pre><code>&lt;div style="display: block;"&gt; &lt;p&gt; &lt;/p&gt; &lt;ul class="cms clearfix"&gt; &lt;li&gt; &lt;a class="has-icon icon1" href="barista-course-melbourne/espresso-basics" target="_parent"&gt; &lt;/a&gt; &lt;h4&gt;LEVEL 1&lt;/h4&gt; &lt;h4&gt;Espresso Basics&lt;/h4&gt; &lt;br /&gt; &lt;h4&gt;3 hours - $99&lt;/h4&gt; &lt;span&gt;An introductory barista course where you will learn fundamental barista skills.&lt;/span&gt; &lt;a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/espresso-basics" target="_parent"&gt; &lt;span&gt;    COURSE INFO    &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="has-icon icon2" href="barista-course-melbourne/latte-art" target="_parent"&gt; &lt;/a&gt; &lt;h4&gt;LEVEL 2&lt;/h4&gt; &lt;h4&gt;Latte Art&lt;/h4&gt; &lt;br /&gt; &lt;h4&gt;2 hours - $150&lt;/h4&gt; &lt;span&gt;Learn to pour like a pro. You will learn to pour rosettas, hearts and tulips. &lt;/span&gt; &lt;a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/latte-art" target="_parent" style="text-align: center;"&gt; &lt;span&gt;    COURSE INFO    &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="has-icon icon3" href="barista-course-melbourne/advanced-barista-training" target="_parent"&gt; &lt;/a&gt; &lt;h4&gt;LEVEL 3&lt;/h4&gt; &lt;h4&gt;Advanced Barista&lt;/h4&gt; &lt;br /&gt; &lt;h4&gt;3 hours - $250&lt;/h4&gt; &lt;span&gt;Do you have what it takes to become a top barista? Take your career to the next level! &lt;br /&gt; &lt;/span&gt; &lt;a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/advanced-barista-training" target="_parent" style="text-align: center;"&gt; &lt;span&gt;    COURSE INFO    &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a class="has-icon icon4" href="barista-course-melbourne/home-barista-training" target="_parent"&gt;&lt;/a&gt; &lt;h4&gt;HOME&lt;/h4&gt; &lt;h4&gt;Barista Classes&lt;/h4&gt; &lt;br /&gt; &lt;h4&gt;Various Classes&lt;/h4&gt; &lt;span&gt;Take a range of our home barista classes in the comfort of your own home.&lt;br /&gt;&lt;/span&gt; &lt;a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="barista-course-melbourne/home-barista-training" target="_parent" style="text-align: center;"&gt; &lt;span&gt;   LEARN MORE   &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="button-avartar clearfix"&gt; &lt;p&gt; &lt;/p&gt; &lt;p style="text-align: center;"&gt; {modal href="barista-course-melbourne/index.php?tmpl=component&amp;amp;id=2333" class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red"} &lt;span&gt;Upcoming Barista Course Dates&lt;/span&gt; {/modal} &lt;/p&gt; &lt;p&gt; &lt;/p&gt; &lt;/div&gt; </code></pre> <p></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJanak
    1. USDavid
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLinks do not centre as required
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POLinks do not centre as required
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COYou might want to try using `margin: 0 auto;` instead of `margin: auto;`, the former will center it horizontally.
      singulars
      1. POLinks do not centre as required
      1. USIlan Biala
    2. COLet me know if that works for you. If not, maybe give me a link to the site or a jsfiddle and I'll try some stuff out.
      singulars
      1. POLinks do not centre as required
      1. USIlan Biala
    3. COI've tried margin auto doesn't seem to work
      singulars
      1. POLinks do not centre as required
      1. USDavid
 

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