Вопросы Теги

Центрируйте блок содержания, когда Вы не будете знать его ширины заранее

Для данных изображения мне проще использовать canvas.toBlob (асинхронный) 

function b64toBlob(b64, onsuccess, onerror) {
    var img = new Image();

    img.onerror = onerror;

    img.onload = function onload() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        canvas.toBlob(onsuccess);
    };

    img.src = b64;
}

var base64Data = 'data:image/jpg;base64,/9j/4AAQSkZJRgABAQA...';
b64toBlob(base64Data,
    function(blob) {
        var url = window.URL.createObjectURL(blob);
        // do something with url
    }, function(error) {
        // handle error
    });
7
задан Nhan 3 December 2016 в 18:44
поделиться

6 ответов

@Jason, да, <center> работы. Хорошие времена. Я предложу следующее, хотя:

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}
<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

ОТРЕДАКТИРУЙТЕ @Santi, элемент блочного уровня заполнит ширину родительского контейнера, таким образом, это эффективно будет width:100% и текст будет течь слева, оставляя Вас с бесполезной разметкой и элементом нев центре. Вы могли бы хотеть попробовать display: inline-block;. Firefox мог бы жаловаться, но это правильно. Кроме того, попытайтесь добавить a border: solid red 1px; к CSS .my-centered-content DIV для наблюдения, что происходит, поскольку Вы испытываете эти вещи.

9
ответ дан 6 December 2019 в 15:39
поделиться

Это будет самым хромым ответом, но он работает:

Используйте <центральный> тег устаревший.

:P

Я сказал Вам, что это будет Ламе. Но, как я сказал, это работает!

*дрожите*

4
ответ дан 6 December 2019 в 15:39
поделиться

Я думаю, что Ваш пример работал бы точно также, если бы Вы использовали <отделение> вместо <таблица>. Единственная разница - то, что текст в <таблица> также центрируется. Если Вы хотите это также, просто добавьте, что текст - выравнивается: центр; правило.

Другая вещь иметь в виду состоит в том, что <отделение> будет значением по умолчанию заполнять все доступное горизонтальное пространство. Поместите границу на него, если Вы не уверены, где это запускается и заканчивается.

1
ответ дан 6 December 2019 в 15:39
поделиться

Следующие работы достаточно хорошо. отметьте положение и использование автоматических

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

Примечание: не уверенный, если это работает в IE.

0
ответ дан 6 December 2019 в 15:39
поделиться

В FF3 Вы можете:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

Это имеет преимущество использования независимо от того, что элемент имеет большую часть семантического смысла (замените отделение чем-то лучше, если соответствующий), но недостаток, который это приводит к сбою в IE (grr...)

Кроме этого, не устанавливая ширину, Ваш лучший выбор состоит в том, чтобы использовать JavaScript для точного расположения левого края. Я не уверен, классифицировали ли Вы это как 'изворотливый прием', все же.

Это действительно зависит от того, что Вы хотите сделать, конечно. Учитывая Ваш простой тестовый сценарий, выравнивается отделение с текстом-: центр имел бы точно тот же эффект.

0
ответ дан 6 December 2019 в 15:39
поделиться 

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}
<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>
0
ответ дан 6 December 2019 в 15:39
поделиться