Центрировать элемент с помощью CSS [duplicate]

Question

Центрировать элемент с помощью CSS [duplicate]

Использование правильного инструмента для задания ...
Как обсуждалось в комментариях, решение real предназначено для использования IDE, которая позволяет находить определенные части файла. Существует много существующих решений:
Для Vim существует Nvim-R .

Для Emacs существует ESS .

И, конечно, есть превосходная автономная RStudio IDE .

В качестве особого замечания все вышеупомянутые решения работайте как локально, так и на сервере (например, через SSH-соединение). R может даже работать на кластере HPC - он может все еще взаимодействовать с IDE, если он настроен правильно.

... или ... not .

Если, по какой-то причине ни одно из вышеперечисленных решений не работает, вот небольшой модуль [gist] , который может выполнять эту работу. Я вообще не рекомендую использовать его, хотя.1

#' (Re-)source parts of a file
#'
#' \code{rs} loads, parses and executes parts of a file as if entered into the R
#' console directly (but without implicit echoing).
#'
#' @param filename character string of the filename to read from. If missing,
#' use the last-read filename.
#' @param from first line to parse.
#' @param to last line to parse.
#' @return the value of the last evaluated expression in the source file.
#'
#' @details If both \code{from} and \code{to} are missing, the default is to
#' read the whole file.
rs = local({
    last_file = NULL

    function (filename, from, to = if (missing(from)) -1 else from) {
        if (missing(filename)) filename = last_file

        stopifnot(! is.null(filename))
        stopifnot(is.character(filename))

        force(to)
        if (missing(from)) from = 1

        source_lines = scan(filename, what = character(), sep = '\n',
                            skip = from - 1, n = to - from + 1,
                            encoding = 'UTF-8', quiet = TRUE)
        result = withVisible(eval.parent(parse(text = source_lines)))

        last_file <<- filename # Only save filename once successfully sourced.
        if (result$visible) result$value else invisible(result$value)
    }
})

Пример использования:

# Source the whole file:
rs('some_file.r')
# Re-soure everything (same file):
rs()
# Re-source just the fifth line:
rs(from = 5)
# Re-source lines 5–10
rs(from = 5, to = 10)
# Re-source everything up until line 7:
rs(to = 7)

1 Забавная история: Недавно я оказался на кластере с перепутанная конфигурация, из-за которой невозможно установить требуемое программное обеспечение, но отчаянно нужно отлаживать рабочий процесс R из-за надвигающегося крайнего срока. У меня буквально не было выбора, кроме как скопировать и вставить строки R-кода в консоль вручную. Это - ситуация, в которой это может пригодиться. И да, это действительно произошло.

503

css position css-position center positioning

задан Chris Happy 1 May 2017 в 20:07

21 ответ

Другие вопросы по тегам:

css position css-position center positioning

Похожие вопросы:

score -1 · Answer 1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Этот ответ содержит только код. Хотя это может быть правильно, оно должно сопровождаться объяснением того, почему код отвечает на вопрос OP. Код не является «самоочевидным». на Stack Exchnge. — JBH, 28 October 2017 в 15:49

score 1 · Answer 2

Вы можете попробовать следующим образом:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

score 7 · Answer 3

Если вы не знаете ширину элемента, вы можете использовать этот код:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Демо на скрипке: http: // jsfiddle. net / wrh7a21r /

Источник: https://stackoverflow.com/a/1777282/1136132

7

ответ дан Community 16 August 2018 в 10:21

1

не работает, когда в div jsfiddle.net/wrh7a21r/15 – Nabi K.A.Z. 11 June 2016 в 21:43
2

@ NabiK.A.Z. этот пример полезен, если вы не знаете ширину элемента. В вашем примере вы устанавливаете ширину в div. – joseantgv 13 June 2016 в 09:47

score 0 · Answer 4

Кажется, что есть два решения; центрируется с использованием полей и центрируется с использованием положения. Оба работают нормально, но если вы хотите абсолютную позицию элемента относительно этого центрированного элемента, вам нужно использовать метод абсолютной позиции, потому что абсолютное положение второго элемента по умолчанию относится к первому родительскому объекту, который расположен. Например:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Пока я не прочитал эту публикацию, используя автоматическую технику margin: 0, чтобы построить меню слева от моего содержимого, мне пришлось построить столбец одинаковой ширины для чтобы сбалансировать это. Не красиво. Спасибо!

score 22 · Answer 5

Это сработало для меня:

position: absolute;
left: 50%;
transform: translateX(-50%);

22

ответ дан Deplake 16 August 2018 в 10:21

score 3 · Answer 6

Абсолютный объект внутри относительного объекта относится к его родительскому объекту, проблема в том, что вам нужна статическая ширина для контейнера #slideshowWrapper, а остальная часть решения подобна другим пользователям:

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

Ваша скрипка как два изображения складываются друг на друга. — Ryan Gibbons, 14 December 2011 в 19:30

score 40 · Answer 7

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

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

Когда я использую комбинацию сверху, изображение ведет себя как фоновое изображение со следующими настройками:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Подробнее о первом примере можно найти здесь: Поддерживать соотношение сторон div с CSS

score 406 · Answer 8

Не зная width / height элемента position1, все равно можно выровнять его следующим образом:

ПРИМЕР ЗДЕСЬ

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Стоит отметить, что CSS Transform поддерживается в IE9 и выше . (Префикс поставщика опущен для краткости)

Объяснение

Добавление top / left в 50% перемещает край верхнего / левого края элемента в середину родительского элемента, а функция translate() с (отрицательным) значением из -50% перемещает элемент на половину его размера. Следовательно, элемент будет располагаться посередине.

Это связано с тем, что процентное значение в свойствах top / left относительно высота / ширина родительского элемента (который создает содержащий блок).

Хотя процентное значение в функции translate() transform относительно ширина / высота самого элемента (Фактически это относится к размеру ограничивающей рамки ) .

Для однонаправленного выравнивания перейдите к translateX(-50%) или translateY(-50%).

1. Элемент с position, отличный от static. То есть relative, absolute, fixed.

Это правильный путь, добро пожаловать в 2015! — ShayneStatzell, 21 April 2015 в 17:46
Я искал повсюду ответ на это и хорошее объяснение. Это лучший ответ и отличное объяснение! Благодарю. — Mike, 14 October 2015 в 07:29
Горизонтальное центрирование: position: absolute; left: 50%; transform: translateX(-50%);, вертикальное центрирование: position: absolute; top: 50%; transform: translateY(-50%);. — K._, 17 February 2016 в 04:21

score 5 · Answer 9

Использование left: calc(50% - Wpx/2);, где W - ширина элемента, работает для меня.

5

ответ дан Julix 16 August 2018 в 10:21

1

Как вы определяете W? – Purplejacket 13 January 2017 в 03:44
2

Он сказал, что «изображение» - в идеале, когда вы делаете изображения для Интернета, вы должны сделать изображение в размере, который вы собираетесь использовать (вместо того, чтобы изменять его размер), чтобы избежать лишнего веса (если вы делаете большое изображение небольшим) или нечеткость (если вы делаете небольшое изображение большим). - Вы можете использовать & quot; imageElement.naturalHeight & quot; и "imageElement.naturalWidth & quot; если вы используете jQuery, а затем динамически динамически, но это становится немного сложнее. Справедливости ради, многие другие ответы также требуют, чтобы вы знали ширину изображения, чтобы их техника работала. – Julix 13 January 2017 в 20:55
3

если вы действительно не знаете, как получить W, но в Chrome вы можете использовать CTRL + Shift + i (инструменты разработчика), затем CTRL + Shift + C (режим проверки), чтобы навести курсор на элементы и посмотреть, насколько широкими являются вещи. Вы также можете просто решить, насколько широка вы хотите, и добавить "width: Wpx & quot; к вашему css. – Julix 13 January 2017 в 20:57

score 44 · Answer 10

Простой CSS-трюк, просто добавьте:

width: 100%;
text-align: center;

Это работает как с изображениями, так и с текстом.

44

ответ дан KatieK 16 August 2018 в 10:21

1

Я уже поддержал, но вы могли бы добавить какое-то объяснение? – Kick Buttowski 26 February 2016 в 23:57

score 5 · Answer 11

Я не уверен, чего вы хотите достичь, но в этом случае просто добавление width: 100%; к вашему ul#slideshow li сделает трюк.

Объяснение

Тег img - это элементы встроенного блока. Это означает, что они текут как встроенный текст, но также имеют ширину и высоту, подобные элементам блока. В вашем css есть два правила text-align: center;, применяемые к <body> и к #slideshowWrapper (что является избыточным btw), что делает все дочерние элементы inline и inline-block центрированными в своих ближайших элементах блока, в вашем коде это теги li. Все элементы блока имеют width: 100%, если они являются статическим потоком (position: static;), который по умолчанию. Проблема в том, что когда вы указываете li теги на position: absolute;, вы вынимаете их из нормального статического потока, и это заставляет их сжимать свой размер, чтобы просто соответствовать их внутреннему контенту, другими словами, они вроде как «теряют», их свойство width: 100%.

score 16 · Answer 12

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

см. демо на: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; работает с элементом position: absolute при добавлении left: 0; right: 0;

16

ответ дан kukkuz 16 August 2018 в 10:21

1

Пожалуйста, предоставьте какой-то комментарий или обоснование того, почему этот код работает. Ответы на код неизбежно будут помечены для удаления. – rayryeng 24 May 2014 в 03:11

score 0 · Answer 13

Используйте margin-left: x%;, где x - половина ширины элемента.

0

ответ дан Luke 16 August 2018 в 10:21

score 14 · Answer 14

Проще, лучше:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Затем вам нужно вставить свой тег img в тег, который имеет спортивную позицию: относительное свойство, следующим образом:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

score 24 · Answer 15

, чтобы центрировать позицию aa: абсолютный атрибут, который вам нужно установить слева: 50% и margin-left: -50% от ширины div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

для абсолютного абсолютного абсолютного значения вам нужно сделайте то же самое, что и бутон не с левой, а сверху. (ПРИМЕЧАНИЕ: html и тело должны иметь минимальную высоту 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

и могут быть объединены как для

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

Отличный ответ, спасибо, что поделились этим! — sergserg, 24 September 2013 в 17:12

score 1 · Answer 16

Абсолютная позиция выводит его из потока и помещает его в 0x0 в родительский элемент (последний элемент блока имеет положение абсолютное или относительное положение).

Я не уверен, что именно вы, что вы пытаетесь выполнить. Лучше всего установить li в position:relative и центрировать их. Учитывая ваш текущий CSS

Зайдите в http://jsfiddle.net/rtgibbons/ejRTU/ , чтобы играть с ним

: / в конце почти такое же решение, как ваше ... & lt; Проголосовать — eveevans, 14 December 2011 в 19:44

score 3 · Answer 17

Это простое и лучшее решение для центрального элемента с «position: absolute»

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

score 72 · Answer 18

Div вертикально и горизонтально выровненный центр

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Примечание: Элементы должны иметь ширину и высоту, которые необходимо установить

72

ответ дан Sebin Simon 16 August 2018 в 10:21

1

Я не знаю, почему это не получило больше голосов. Насколько я могу судить, работает во всех браузерах, включая мобильные браузеры. Швы более надежные с точки зрения поддержки. Это просто, легко и чисто ... – David Martins 4 August 2015 в 09:15
2

Это лучший ответ. Для этого требуется только один div и имеет больше вариантов использования, чем вызов слева: 50% ;, верх: 50%; как решение с 69 + голосами – Ian Steffy 7 August 2015 в 10:27
3

лучший ответ до сих пор, любой, кто придет сюда, должен проверить это! – Abdo Adel 7 December 2015 в 13:30
4

Элементу также нужен набор height для этого. – alexbooots 8 December 2015 в 23:50
5

Удивительный ответ решил мою проблему – MD Shahrouq 2 April 2018 в 07:00

score 163 · Answer 19

Центрирование чего-то absolute расположено довольно сложно в CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Измените margin-left на (отрицательный) на половину ширины элемента, который вы пытаетесь центрировать.

163

ответ дан Spencer O'Reilly 16 August 2018 в 10:21

1

При тестировании это не работает, когда изображения разных размеров, и они все еще складываются друг на друга – Ryan Gibbons 14 December 2011 в 20:57
2

Too hack-ish (так как почти всегда получается css). Но потрясающе! :-) – Dr.Kameleon 7 December 2013 в 11:35
3

Меня искушала умность некоторых других ответов, но только эта была надежной для меня. – Chris Schiffhauer 2 April 2014 в 02:02
4

У меня была такая же проблема, как у Райана, поэтому я попробовал второй ответ, предложенный «baaroz». и это сработало для меня !!! и он поддерживает разные разрешения, так как мой основной DIV имеет ширину в%, а не PX – UID 11 April 2014 в 20:05
5

На самом деле это не сосредоточено. Это больше позиционируется справа – Artsicle 10 January 2017 в 21:54

score 912 · Answer 20

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

912

ответ дан Tushar Gupta 16 August 2018 в 10:21

1

Это гораздо более чистый ответ, чем остальные! Есть ли какие-либо оговорки? – sbichenko 12 November 2013 в 20:15
2

Самый умный ответ. Я только что проверил его, и он работает во всех браузерах. Он не работает на IE8, но работает на IE & gt; = 9 – Roger 11 December 2013 в 11:43
3

Не забудьте проверить в IE, этот трюк не работает, если элемент имеет «максимальную ширину», установленную в IE9 – aphax 22 January 2014 в 13:29
4

Я лично предпочитаю синтаксис «margin: 0 auto; left: 0; right: 0; & quot; – Hector Ordonez 15 March 2014 в 16:07
5

Это довольно просто не работает, если не задана ширина. Он может APPEAR работать, если у вас есть text-align: center на родительском объекте и не имеет фона в элементе с абсолютным позиционированием, но на нем накладывается фоновый рисунок, и вы увидите, что он фактически использует полную ширину. Ответ на перевод (-50%) является правильным. – Codemonkey 23 March 2016 в 16:29

score 2 · Answer 21

Чтобы центрировать элемент «позиция: абсолютный».

добавить эти

left: 0%;
right: 0%;
text-align: center;

или эти элементы

left: 0%;
right: 0%;
margin: 0 auto;

: положение абсолютное

.element {
  position: absolute;
}

элемент с центром

.element {
  position: absolute;
  left: 0%;
  right: 0%;
  text-align: center; // or this ->  margin: 0 auto;
}

При нулевых значениях вам не нужен блок. — Simo, 31 May 2018 в 20:39