Question

В общем возникла проблема при адаптации дизайна под мобильное устройство, а именно указав нужный стиль "@media only screen and (max-width: 940px) { }", и попробовав написать, что элементы должны стоять чётко по середине, ни чего не получилось. Попробовал прописать в стили "Float: Center;" нужные элементы по середине не встали. Что надо прописывать в данном случае?

 /*Material_info_load*/ .material {text-align: center;} .material-info {display: inline-block;width: 100%;background-color: #0a151b; padding: 10px;} .material-block {color: #fff;font-size: 14px;text-align:left;display: block;float: left;margin: 5px;width: 48%;} .material-block a{color: #fff;} .material-block a:hover{color: #b33d3d;} .material-info p {color: #fff; font-size: 12pt;} .material-info span {padding: 10px; background:#b33d3d;} .user_file {float: right;} .uf_ava {width:150px;} .uf_info a {color: #fff;} .uf_info a:hover {color: #b33d3d;} .uf_info span {background:none;} @media only screen and (max-width: 940px) { } /*END*/

 

Answer 1

1. Значения center у float нет, только right и left.
2. Данный блок нормально отображается, лучше не трогать и не пытаться выровнять так как у вас там несколько блоков вместе и каждый имеет свои фиксированный размеры. По сути один мы ровняем и другой ломаем. Оставьте, не меняйте, сейчас все нормально отображается, но можно сделать хуже.

Comments

Я хотел сделать в адаптивной версии, к мобильным устройствам, все эелементы в блоке информации о мтариелае, а именно автор, кто загрузил и т.д. по середине. Как мне это достичь. Понял только, что у значения float нет центра, то есть центр выставить нельзя. Как мне достичь задуманного, без float?

---

trem200,

Можно сделать примерно так:

@media only screen and (max-width: 940px) { .material-block {margin: 0 auto;padding-bottom: 20px;display: table;float: none;width: initial;} }