1. дома
  2. Вопрос и ответ
  3. Как центрировать кнопку на экране с изменением размера?

Как центрировать кнопку на экране с изменением размера?

2015-10-28 3 views
2

Как центрировать кнопку на экране с изменением размера?

.codrops-top { 
 
     line-height: 30px; 
 
     font-size: 13px; 
 
     background: #fff; 
 
     background: rgba(255, 255, 255, 0.8); 
 
     text-transform: uppercase; 
 
     z-index: 9999; 
 
     position: absolute; 
 
     width: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     font-family: Cambria, Georgia, serif; 
 
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 
 
     font-weight: 900; 
 
    } 
 
    .codrops-top a { 
 
     padding: 0px 10px; 
 
     letter-spacing: 1px; 
 
     color: #333; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
    } 
 
    .codrops-top a:hover { 
 
     color:#12836d; 
 
     cursor:pointer; 
 
     text-decoration: none; 
 
    } 
 
    .codrops-top span.right{ 
 
     float: right; 
 
     
 
    } 
 
    .codrops-top a{ 
 
     color:black; 
 
    } 
 
    .fa{ 
 
     padding:0 5px; 
 
    } 
 
    .codrops-top span a.btn { 
 
     padding: 9px 38px; 
 
     line-height: 20px; 
 
    } 
 
    .codrops-top span a.btn-primary { 
 
     color: #fff; 
 
     background-color: #5bbc2e; 
 
     border-color: #5bbc2e; 
 
    } 
 
@media only screen and (max-width: 767px){ 
 
     .codrops-top{ 
 
      text-align: center; 
 
     } 
 
     .codrops-top span.right{ 
 
      text-align: center; 
 
      float:none; 
 

 
     } 
 
    } 
 
    @media screen and (min-width: 1338px){ 
 
.largeScreen {width:100%;text-align:center;} 
 
.largeScreen span {display:inline-block;} 
 
.hide{ 
 
    display: none; 
 
} 
 
}
<div class="codrops-top"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <div class="col-lg-3 col-md-3 col-sm-3 hide"> 
 
         <a href=""> 
 
          <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808 
 
         </a> 
 
        </div> 
 
        <div style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6 hide"> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-book"></i></span>Blog</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-trophy"></i></span>Career</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong> 
 
         </a> 
 

 
        </div> 
 
        <div class="col-lg-3 col-md-3 col-sm-3 largeScreen"> 
 
         <span class="right"> 
 
          <a href=""> 
 
           <a href="#" class="btn btn-primary">Client Area</a> 
 
          </a> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

теперь я хочу кнопку клиентской области в центре по размеру экрана 1338px и все вещи должны быть скрыты только кнопка должна быть в центре. Я пробовал, но кнопка не входит в центр, она идет с левой стороны.

источник

2015-10-28 Harsh Desai

+0

Вы хотите выравнивание по центру кнопки только 1338px или для всего экрана. –

+0

для всех экранов –

+0

@ Ezhil-UIDeveloper, часть которого вы отредактировали? –

ответ

0 

.codrops-top { 
 
     line-height: 30px; 
 
     font-size: 13px; 
 
     background: #fff; 
 
     background: rgba(255, 255, 255, 0.8); 
 
     text-transform: uppercase; 
 
     z-index: 9999; 
 
     position: absolute; 
 
     width: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     font-family: Cambria, Georgia, serif; 
 
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 
 
     font-weight: 900; 
 
     text-align: center; 
 
    } 
 
    .codrops-top a { 
 
     padding: 0px 10px; 
 
     letter-spacing: 1px; 
 
     color: #333; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
    } 
 
    .codrops-top a:hover { 
 
     color:#12836d; 
 
     cursor:pointer; 
 
     text-decoration: none; 
 
    } 
 
    
 
    .codrops-top a{ 
 
     color:black; 
 
    } 
 
    .fa{ 
 
     padding:0 5px; 
 
    } 
 
    .codrops-top span a.btn { 
 
     padding: 9px 38px; 
 
     line-height: 20px; 
 
    } 
 
    .codrops-top span a.btn-primary { 
 
     color: #fff; 
 
     background-color: #5bbc2e; 
 
     border-color: #5bbc2e; 
 
    } 
 
@media only screen and (max-width: 767px){ 
 
     .codrops-top{ 
 
      text-align: center; 
 
     } 
 
     .codrops-top span.right{ 
 
      text-align: center; 
 
      float:none; 
 

 
     } 
 
    } 
 
    @media only screen and (max-width: 1338px){ 
 
     #hide{ 
 
      
 
     } 
 
     .codrops-top{ 
 
      text-align: center; 
 
      float:right; 
 
     } 
 
    }
<div class="codrops-top"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <div id="hide" class="col-lg-3 col-md-3 col-sm-3"> 
 
         <a href=""> 
 
          <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808 
 
         </a> 
 
        </div> 
 
        <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6"> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-book"></i></span>Blog</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-trophy"></i></span>Career</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong> 
 
         </a> 
 

 
        </div> 
 
        <div class="col-lg-3 col-md-3 col-sm-3"> 
 
         <span class="right"> 
 
          <a href=""> 
 
           <a href="#" class="btn btn-primary">Client Area</a> 
 
          </a> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2015-10-28 10:51:52

+0

@harsh используйте это: https://jsfiddle.net/ru2zdqm0/ Скопируйте обновленный CSS из этой ссылки и используйте его. –

+0

благодарю вас за ваше время, мой друг, но когда я использую дисплей: ни один в поле #hide id, область клиентской области идет слева. И я хочу скрыть все, кроме кнопки клиентской области, при изменении размера экрана до 1338 пикселей или менее. –

+0

Итак, под размером экрана 1338px вы хотите скрыть все содержимое, кроме кнопки клиентской области, и в то же время кнопка должна находиться в центре экрана? –

0

Я предполагаю, что вы включили самозагрузки в свой код.

<style> 
    @media screen and (min-width: 1338px){ 
     .largeScreen {width:100%;text-align:center;} 
     .largeScreen span {display:inline-block;} 
     .hide {display:none;} 
    } 
</style> 
<div class="col-lg-3 col-md-3 col-sm-3 largeScreen"> 
    <span> 
     <a href="#" class="btn btn-primary">Client Area</a> 
    </span> 
</div>
  • Избегайте использования несколько раз тот же идентификатор в коде. Я вижу id = "hide" дважды. Вместо этого вы можете использовать class = "hide".
  • Я бы предложил переименовать класс hide, если вы хотите скрыть элементы только выше 1338px, поскольку класс bootstrap hide скрывает содержимое во всех разрешениях.
  • Вы пропустили упоминание дисплея: в CSS для скрытия нет.
  • Удалить поплавок: прямо из пролета. text-align: center не будет иметь никакого эффекта, если вы не удалите свойство float css.
  • Я добавил класс largeScreen, поскольку классы col-lg-3 col-md-3 col-sm-3 сделают ширину div равной 25%, а не полную ширину экрана.

Надеюсь, что этот ответ поможет вам решить вашу проблему.

источник

2015-10-28 11:37:10 GVinith

+0

, когда я отредактировал свой выше код, как вы сказали, он скрывает все данные, кроме области клиента.Я хочу скрыть их, когда я изменяю размер окна. –

0 

.codrops-top { 
 
     line-height: 30px; 
 
     font-size: 13px; 
 
     background: #fff; 
 
     background: rgba(255, 255, 255, 0.8); 
 
     text-transform: uppercase; 
 
     z-index: 9999; 
 
     position: absolute; 
 
     width: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     font-family: Cambria, Georgia, serif; 
 
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 
 
     font-weight: 900; 
 
     text-align: center; 
 
    } 
 
    .codrops-top a { 
 
     padding: 0px 10px; 
 
     letter-spacing: 1px; 
 
     color: #333; 
 
     display: inline-block; 
 
     text-decoration: none; 
 
    } 
 
    .codrops-top a:hover { 
 
     color:#12836d; 
 
     cursor:pointer; 
 
     text-decoration: none; 
 
    } 
 
    
 
    .codrops-top a{ 
 
     color:black; 
 
    } 
 
    .fa{ 
 
     padding:0 5px; 
 
    } 
 
    .codrops-top span a.btn { 
 
     padding: 9px 38px; 
 
     line-height: 20px; 
 
    } 
 
    .codrops-top span a.btn-primary { 
 
     color: #fff; 
 
     background-color: #5bbc2e; 
 
     border-color: #5bbc2e; 
 
    } 
 
@media only screen and (max-width: 767px){ 
 
     .codrops-top{ 
 
      text-align: center; 
 
     } 
 
     .codrops-top span.right{ 
 
      text-align: center; 
 
      float:none; 
 

 
     } 
 
    } 
 
    @media only screen and (max-width: 1338px){ 
 
     #hide{display:none;    
 
     } 
 
     .codrops-top{ 
 
      text-align: center; 
 
      float:right; 
 
     } 
 
    }
<div class="codrops-top"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <div id="hide" class="col-lg-3 col-md-3 col-sm-3"> 
 
         <a href=""> 
 
          <strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>+91-8510-808-808 
 
         </a> 
 
        </div> 
 
        <div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6"> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-book"></i></span>Blog</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-trophy"></i></span>Career</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong> 
 
         </a> 
 
         <a href=""> 
 
          <strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong> 
 
         </a> 
 

 
        </div> 
 
        <div class="col-lg-3 col-md-3 col-sm-3"> 
 
         <span class="right"> 
 
          <a href=""> 
 
           <a href="#" class="btn btn-primary">Client Area</a> 
 
          </a> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2015-10-29 08:11:20

+0

Проверьте это демо. –

+0

нет, не работает кнопка идет влево, я хочу ее в фиксированном центре (: –

+0

вы можете мне помочь? –

Смежные вопросы

 Смежные вопросы