即使分辨率獨立對齊，按鈕也不居中

我的網站上有一個按鈕，我使用的是獨立於分辨率的對齊方式。我檢查了兩種不同分辨率的電腦屏幕，但它看起來很好，但是一旦在較大的寬高比屏幕或移動/平板設備上打開，它就會重新定位。在較大的寬高比屏幕上，按鈕向左移動，在較小的設備上，它向右漂移。我不是100％確定會出現什麼問題。以下是我的CSS和HTML代碼。即使分辨率獨立對齊，按鈕也不居中

HTML：

<div class="Welcome"> 
    <h1>Welcome to Beauty Factory Bookings</h1> 
    <a href="website_link"><button>Book Appointment</button></a> 
</div>

CSS：

body { 
     background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center; 
     background-size: cover; 
     font-family: Montserrat; 
     margin: 0; 
     padding: 0; 

    .Welcome { 
     margin-top: 13%; 
    } 

    .Welcome h1 { 
     text-align: center; 
     font-family: Montserrat; 
     font-size: 50px; 
     text-transform: uppercase; 
    } 

    .Welcome button { 
     height: 60px; 
     width: 340px; 
     background: #ff656c; 
     border: 1px solid #e15960; 
     color: #fff; 
     font-weight: bold; 
     text-transform: uppercase; 
     font-size: 17px; 
     font-family: Montserrat; 
     outline: none; 
     cursor: pointer; 
     text-align: center; 
     margin-left: 33%; 
     margin-top: 3%; 
     border-radius: 5px; 
    }

任何想法如何解決這一問題？

來源

2015-12-20 Filip Grebowski

你真的需要創建一個[MCVE（http://stackoverflow.com/help/mcve）。基本上這意味着，除非您不能使按鈕在這裏表現得像您網站上的按鈕，否則我們無法爲您提供幫助。 –

只是做我所做的使用彈性盒。 – Guille

我試過了，它仍然不起作用。你的解決方案可能非常好，我認爲我的代碼其餘部分也有問題。 –

您居中html元素，它具有標準位置並且是塊元件與margin-left: auto和margin-right: auto。

這是一個慣例，寫小寫的第一個字母的類和ID。

Example

來源

2015-12-20 22:53:23 Sun

創建a標籤的新的CSS屬性，並設置顯示器彎曲（佔用寬度的100％;及證明內容中心

編輯

檢查你的網站後，那裏。是的15px的保證金左從什麼地方來了。擺脫它，如果這是一個可能性或者只是添加margin-left: 0到.Welcome a {...}

.Welcome a { 
    display: flex; 
    /*set display mode of anchor to flex*/ 
    justify-content: center; /* Justify content center*/ 
    margin-left: 0; /* Add !important in case it is overwritten*/ 
}

.Welcome { 
 
    margin-top: 13%; 
 
} 
 
.Welcome h1 { 
 
    text-align: center; 
 
    font-family: Montserrat; 
 
    font-size: 50px; 
 
    text-transform: uppercase; 
 
} 
 
.Welcome a { 
 
    display: flex; 
 
    /*set display mode of anchor to flex*/ 
 
    justify-content: center; /* Justify content center*/ 
 
} 
 
.Welcome button { 
 
    height: 60px; 
 
    width: 340px; 
 
    background: #ff656c; 
 
    border: 1px solid #e15960; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-size: 17px; 
 
    font-family: Montserrat; 
 
    outline: none; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
}

<div class="Welcome"> 
 
    <h1>Welcome to Beauty Factory Bookings</h1> 
 

 
     <a href="website_link"> 
 
     <button>Book Appointment</button> 
 
     </a> 
 

 
    </div>

來源

2015-12-20 22:46:41 Guille

在頁面容器上顯示flex？他的頁面中的其他元素會發生什麼？ –

老實說，我在所有事情中都使用flex，因爲我用它控制了很多東西）。我幾乎不使用'margin：0 auto'來集中東西。每個人都有自己的喜好。 – Guille

我從不使用'0 auto'，因爲我不喜歡在兒童上設置'text-align：initial'。我使用flex或'trasnform'，我不能使用'flex'。 –

只是另一種方式來做到這一點：

我包裹在div您的按鈕，使用text-align:center 不要忘記中間的按鈕取出margin-left: 33%;在你的CSS

HTML

<div class="Welcome"> 
    <h1>Welcome to Beauty Factory Bookings</h1> 
    <div class="center"> 
     <a href="website_link"><button>Book Appointment</button></a> 
    </div> 
</div>

CSS

.Welcome { 
    margin-top: 13%; 
} 

.Welcome h1 { 
    text-align: center; 
    font-family: Montserrat; 
    font-size: 50px; 
    text-transform: uppercase; 
} 

.center { 
    text-align: center; 
} 

.Welcome button { 
    height: 60px; 
    width: 340px; 
    background: #ff656c; 
    border: 1px solid #e15960; 
    color: #fff; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 17px; 
    font-family: Montserrat; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    margin-top: 3%; 
    border-radius: 5px; 
}

例子：http://codepen.io/anon/pen/EPyjXm

來源

2015-12-20 22:58:10 TLJ

即使分辨率獨立對齊，按鈕也不居中

回答

相關問題