Div align style center: CSS Layout — Horizontal & Vertical Align

вот хороший обходной путь для центрирования div без ширины:

http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/

Вот также хороший пример ситуации: http://www.cssplay.co.uk/menus/centered.html

Если вам нужно центрировать и динамически сжимать/расширять содержимое, не зная ширины, тогда ваш единственный вариант действительно использует таблицу. Это единственный эластичный элемент в репертуаре HTML.

 <таблица>
    
        <тд>
            Что бы ни...
        
    

 

П.С. Вы также можете динамически сжимать div, установив для свойства float значение float:left или float:right. Таким образом, он будет прилипать к левому или правому краю, но вы не сможете центрировать его таким образом.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Требуется, но не отображается

Выравнивание по центру для html.

renanxcortes 2 августа 2018 г., 15:28

#1

Здравствуйте,

Я знаю, что это может быть простой вопрос, но есть ли способ централизовать dcc.Slider в приложении Dash?
Я пробовал это, но это не работает:

 html.Div([
        dcc.Slider(
                   ,
                    мин = мин (лет),
                    макс = макс (лет),
                    значение = мин (лет),
                    mark={str(year): str(year) для года в years_by_step},
                )
        ], style={'width':'75%', 'margin':25, 'textAlign': 'center'})
 

С уважением,
Ренан

клнрдкнт 3 августа 2018 г., 10:41

#2

Одна вещь, которую вы можете сделать, используя набор CSS Skeleton, выглядит примерно так, используя систему Skeletons Grid

 html. Div(
   className = 'строка',
   дети=[
      html.Div(className='два столбца', style={'display': 'inline-block'}),
      dcc.Slider(.... ваш код...., className='десять столбцов', style={'display': 'inline-block'})
   ]
) 

Не знаю, работает ли это, элемент Slider немного странный. Попробуйте использовать инспектор инструментов разработчика Firefox/Chrome, чтобы определить элемент, который вам действительно нужно адресовать. Вы также можете включить локальный CSS в свое приложение Dash, а затем написать там свой CSS. Это где-то на форуме.

ренанкскортес 3 августа 2018 г., 12:14

#3

клнрдкнт:

className=’строка’

Спасибо, но у меня не получилось. На самом деле dss.Slider не поддерживает аргумент «стиль».

клнрдкнт 3 августа 2018 г., 12:49

#4

Оберните это в другой блок, сделайте его 100%?

клнрдкнт 3 августа 2018 г., 12:55

#5

В целом, я думаю, было бы неплохо дать компоненту Slider несколько дополнительных атрибутов, чтобы было проще справляться с такими вещами. CSS-стилизация в целом утомительна…

ренанкскортес 3 августа 2018 г., 13:07

#6

клнрдкнт:

дайте компоненту Slider несколько дополнительных атрибутов, чтобы упростить работу с такими вещами. CSS-стилизация утомительна с ним

Да… Я с вами согласен… Я завернул в другой div, как вы предложили, но у меня опять не получилось. Большое спасибо! Однако прямо сейчас моя команда на мгновение покидает Dash, чтобы разработать веб-приложение с использованием raw plotly.js. Я надеюсь, что Dash со временем улучшится благодаря надлежащей документации и большей гибкости компонентов, особенно с точки зрения пользовательского интерфейса.

Лучший.

Давид22 18 апреля 2019 г., 14:31

#7

Здравствуйте, я знаю, что эта проблема довольно старая, но у меня была такая же, и я нашел способ ее исправить:

1. включить dcc.RangeSlider в div
2. дают некоторые атрибуты стиля, а именно ширину, а также отступы слева и отступы.право, как относительные значения. Например:

html.Div(children=[
dcc.RangeSlider(
id=’range-slider-1′,
min=…,
max=…,
отметок=…,
], style={‘width’: ‘96%’,’padding-left’:’3% ‘, ‘padding-right’:’1%’}),

Другие свойства, такие как автоматическое поле, встроенное отображение, выравнивание текста по центру, не работали. Прокладка делает.

КР

1 Нравится

paw_el 25 июля 2019 г., 13:41

#8

Привет,
Вы всегда можете централизовать все внутри определенного Div:

html.Div([
dcc.Slider(
id=’years-slider’,
min=min(лет),
max=max(лет),
value=min(лет),
отметок={str (year): str(year) для года в years_by_step},
)
], style = {‘width’: ‘100%’, ‘display’: ‘flex’, ‘align-items’: ‘center’, ‘ выравнивание содержимого’: ‘центр’})

11 лайков

сами999 8 сентября 2020 г.