Установите ширину кнопки в текст

В то время как я играл с этим 'Fancy 3D Button', я обнаружил, что width, казалось, был жестко закодирован для соответствия ширина текста.

Вот HTML/CSS:

body {
  background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  width: 160px;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
a:active {
  -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  position: relative;
  top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>

<a href="javascript:void(0);">Push me!</a>

ОТВЕТЫ

Ответ 1

Удалите ширину и display: block, а затем добавьте display: inline-block к кнопке. Чтобы он оставался центрированным, вы можете добавить text-align: center; в body или сделать то же самое во вновь создаваемом контейнере.

Преимущество такого подхода (в том смысле, что оно центрируется с автоматическими полями) состоит в том, что кнопка останется центрированной независимо от того, сколько текста она имеет.

Пример: http://cssdeck.com/labs/2u4kf6dv

Ответ 2

Довольно поздно и не уверен, что это было доступно, когда задавался вопрос, установите width: auto;

Кажется, трюк

Ответ 3

Сохранение размера элемента относительно его содержимого также можно выполнить с помощью display: inline-flex и display: table

Центровка может выполняться с помощью

  • text-align: center; на родительском (или выше, он унаследован)

  • display: flex; и justify-content: center; в родительском

  • position: absolute; left: 50%; transform: translateX(-50%); on элемент с положением: относительный; (по крайней мере) на родителя.

Здесь flexbox руководство из CSS-трюков

Здесь статья о центрировании из CSS-трюков.

Сохранение элемента только в том же объеме, что и его содержимое.

  • Можно использовать display: table;

  • Или inline-anything, включая inline-flex, как используется в моем фрагменте пример ниже.

Имейте в виду, что при центрировании с flexbox justify-content: center;, когда текст обертывает текст, выравнивается влево. Таким образом, вам все равно понадобится text-align: center;, если ваш сайт реагирует, и вы ожидаете, что строки будут завершены.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}
.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  height: 50%;
}
.container.c1 {
  text-align: center; /* needed if the text wraps */
  /* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
 /* without text-align: center; */
}
.button {
  padding: 5px 10px;
  font-size: 30px;
  text-decoration: none;
  color: hsla(0, 0%, 90%, 1);
  background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
  border-radius: 10px;
  box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
  background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
  transition: all 0.2s linear;
}
.button.b1 {
    display: inline-flex; /* element only as wide as content */
}
.button.b2 {
    display: table; /* element only as wide as content */
}
<div class="container c1">
  <a class="button b1" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Before And After Wrap</a>
</div>
<div class="container c2">
  <a class="button b2" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Only Before Wrap</a>
</div>

Ответ 4

Попробуйте добавить display:inline; в свойство CSS кнопки.

Ответ 5

просто добавьте свойство display: inline-block; и удалите ширину.

Ответ 6

Если вы разрабатываете для современного браузера. https://caniuse.com/#search=fit%20content

Вы можете использовать:

width: fit-content;