Question

我无法在页面中对齐“按钮”，这实际上只是使用CSS看起来像按钮的文本链接。它在无序列表中使用（请参阅下面的HTML）。

负责任的CSS代码在这里：

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; }

使用以下HTML代码（我删除了不必要的文本信息，如下图所示）：

<ul class="cms clearfix">   
    <li>
        <a class = "has-icon icon1" 
          href = "barista-course-melbourne/espresso-basics" 
          target = "_parent"></a>    
        <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;">
            <span>COURSE INFO</span>
        </a>
    </li>
</ul>

在像这样的移动设备中呈现按钮不居中的位置。

以下是截图：

enter image description here

非常感谢任何见解和帮助。

这是我用过的完整HTML代码：

<div style="display: block;">
    <p> </p>
    <ul class="cms clearfix">
        <li>
            <a class="has-icon icon1" href="barista-course-melbourne/espresso-basics" target="_parent">
            </a>
            <h4>LEVEL 1</h4>
            <h4>Espresso Basics</h4>
            <br />
            <h4>3 hours - $99</h4>
            <span>An introductory barista course where you will learn fundamental barista skills.</span> 
            <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="barista-course-melbourne/espresso-basics" target="_parent">
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon2" href="barista-course-melbourne/latte-art" target="_parent">
            </a>
            <h4>LEVEL 2</h4>
            <h4>Latte Art</h4>
            <br />
            <h4>2 hours - $150</h4>
            <span>Learn to pour like a pro. You will learn to pour rosettas, hearts and tulips. </span>
            <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;">  
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon3" href="barista-course-melbourne/advanced-barista-training" target="_parent">
            </a>
            <h4>LEVEL 3</h4>
            <h4>Advanced Barista</h4>
            <br />
            <h4>3 hours - $250</h4>
            <span>Do you have what it takes to become a top barista? Take your career to the next level! <br />
            </span>
            <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;">
                <span>    COURSE INFO    </span>
            </a>
        </li>
        <li>
            <a class="has-icon icon4" href="barista-course-melbourne/home-barista-training" target="_parent"></a>
            <h4>HOME</h4>
            <h4>Barista Classes</h4>
            <br />
            <h4>Various Classes</h4>
            <span>Take a range of our home barista classes in the comfort of your own home.<br /></span>
            <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;">            
                <span>   LEARN MORE   </span>
            </a>
        </li>
</ul>
<div class="button-avartar clearfix">
    <p> </p>
    <p style="text-align: center;"> {modal href="barista-course-melbourne/index.php?tmpl=component&amp;id=2333" class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red"}        
        <span>Upcoming Barista Course Dates</span>
        {/modal}
    </p>
<p> </p>
</div>

Answer 1

在li上，点击按钮，设置text-align:center和float:none。

Answer 2

从ul.cms li width: 24.99%;和float: left;

取出{{1}}

Answer 3

不确定问题的来源，文本对齐：li的中心应该将所有内联块元素放在内部。你能展示完整的HTML结构吗？也许has-icon和ja-typo-btn之间有什么东西？

Answer 4

将li的宽度设置为100％。我是内联的，但你可以在外部的css中完成它。

<ul class="cms clearfix">   
    <li style="width: 100%">
        <a class = "has-icon icon1" 
          href = "barista-course-melbourne/espresso-basics" 
          target = "_parent"></a>    
        <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;">
            <span>COURSE INFO</span>
        </a>
    </li>
</ul>

小提琴：http://jsfiddle.net/nuxbox/LhDKb/

Answer 5

在li添加位置：亲戚和按钮上使用position:absolute; top:0; left:50%;可以帮助您解决问题。

Answer 6

在CSS中，您尝试两次应用保证金：

ul.cms .has-icon {
    margin: auto; /* once here */
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 140px;
    margin: 0px 8px; /* again here */
}

试试这个：

ul.cms .has-icon {
    margin: 0 auto; /* center button, change 0 to 5-10 if you want some margin top and bottom */
    display: block;
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 140px;
}

链接不按要求居中

6 个答案: