1

Нужно как-то выравнять блок по центру, чтоб на разных разрешениях он отображался одинаково, может помочь кто-нибудь?

#DIV_1 {
  color: rgb(96, 118, 154);
  height: 1192px;
  text-decoration: none solid rgb(96, 118, 154);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgb(96, 118, 154);
  perspective-origin: 747px 596px;
  transform-origin: 747px 596px;
  caret-color: rgb(96, 118, 154);
  border: 0px none rgb(96, 118, 154);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgb(96, 118, 154) none 0px;
  margin: 0 auto;
  min-width: 900px;
  max-width: 3000px;
  width: 2000px;
  background-size: cover;
  background-size: 100% 100%
}


/*#DIV_1*/

#DIV_1:after {
  color: rgb(96, 118, 154);
  text-decoration: none solid rgb(96, 118, 154);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgb(96, 118, 154);
  caret-color: rgb(96, 118, 154);
  border: 0px none rgb(96, 118, 154);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgb(96, 118, 154) none 0px;
}


/*#DIV_1:after*/

#DIV_1:before {
  color: rgb(96, 118, 154);
  text-decoration: none solid rgb(96, 118, 154);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgb(96, 118, 154);
  caret-color: rgb(96, 118, 154);
  border: 0px none rgb(96, 118, 154);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgb(96, 118, 154) none 0px;
}


/*#DIV_1:before*/

#DIV_2 {
  color: rgba(255, 255, 255, 0.7);
  height: 1192px;
  text-decoration: none solid rgba(255, 255, 255, 0.7);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgba(255, 255, 255, 0.7);
  perspective-origin: 747px 596px;
  transform-origin: 747px 596px;
  caret-color: rgba(255, 255, 255, 0.7);
  background: rgb(14, 17, 37) none no-repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgba(255, 255, 255, 0.7);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgba(255, 255, 255, 0.7) none 0px;
}


/*#DIV_2*/

#DIV_2:after {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none solid rgba(255, 255, 255, 0.7);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgba(255, 255, 255, 0.7);
  caret-color: rgba(255, 255, 255, 0.7);
  border: 0px none rgba(255, 255, 255, 0.7);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgba(255, 255, 255, 0.7) none 0px;
}


/*#DIV_2:after*/

#DIV_2:before {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none solid rgba(255, 255, 255, 0.7);
  text-rendering: optimizelegibility;
  text-size-adjust: 100%;
  column-rule-color: rgba(255, 255, 255, 0.7);
  caret-color: rgba(255, 255, 255, 0.7);
  border: 0px none rgba(255, 255, 255, 0.7);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
  outline: rgba(255, 255, 255, 0.7) none 0px;
}


/*#DIV_2:before*/
<div id="DIV_1">
  <div id="DIV_2">
    <div id="DIV_3">
      <div id="DIV_4">
        <div id="DIV_5">
          <div id="DIV_6">
            <div id="DIV_7">
              <h1 id="H1_8">
                December 2018<br id="BR_9" />
              </h1>
              <h2 id="H2_10">
                <sub id="SUB_11">REPORT</sub>
              </h2>
            </div>
          </div>
          <div id="DIV_12">
            <div id="DIV_13">
              <div id="DIV_14">
                <h3 id="H3_15">
                  DIVIDENDS
                </h3>
                <div id="DIV_16">
                  Dividends (50%): € 3 441,93

                </div>
                <div id="DIV_17">
                  <p id="P_18">
                    Dividends per 1000 EFFM: € 0,02


                  </p>
                  <p id="P_19">
                    Private investors ROI : 0,57%

                  </p>
                  <p id="P_20">
                    Common investors ROI : 0,38%

                  </p>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="DIV_25">
        <div id="DIV_26" style="margin-left:100px">
          <div id="DIV_27">
            <div id="DIV_28">
              <h3 id="H3_29">
                Token private sale

              </h3>
              <div id="DIV_30">
                Mined Cryptocurrencies
              </div>
              <div id="DIV_31">
                <p id="P_32">
                  6074.68 ETC<br id="BR_33" /><span id="SPAN_34">(=228.407968 ETH)</span>
                </p>
              </div>
            </div>
          </div>
          <div id="DIV_35">
            <div id="DIV_36">
              <h4 id="H4_37">
                Mining Costs
              </h4>
              <div id="DIV_38">
                Mining Costs
              </div>
              <div id="DIV_39">
                <p id="P_40">
                  1961.1 ETC<br id="BR_41" /><span id="SPAN_42">(=73.73736 ETH)</span>
                </p>
              </div>
            </div>
          </div>
          <!--
    							<div id="DIV_43">
    								<div id="DIV_44">
    									<h4 id="H4_45">
    										Veritium Costs
    									</h4>
    									<div id="DIV_46">
    										(12% of Net income)
    									</div>
    									<div id="DIV_47">
    										<p id="P_48">
    											18.56047296 ETH
    										</p>
    									</div>
    								</div>
    							</div>
    							-->
          <div id="DIV_49">
            <div id="DIV_50">
              <h4 id="H4_51">
                Net Profit
              </h4>
              <div id="DIV_52">
                dividends &amp; reinvestment
              </div>
              <div id="DIV_53">
                <p id="P_54">
                  136.11013504 ETH
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="DIV_55">
        <div id="DIV_56">
          <div id="DIV_57">
            <h2 id="H2_58">
              <a href="/lets-talk.html" id="A_59">Our miners</a>
            </h2>
            <div id="DIV_60">
              <ul id="UL_61">
                <li id="LI_62">
                  AMD RX 580 : 50
                </li>
                <li id="LI_63">
                  Custom FPGA : 195
                </li>
              </ul>
            </div>
          </div>
          <div id="DIV_64" style="margin-left:-1000px">
            <h2 id="H2_65">
              <a href="/lets-talk.html" id="A_66">Token Sold (10th of December)</a>
            </h2>
            <div id="DIV_67">
              <ul id="UL_68">
                <li id="LI_69">
                  757265.9
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Какой именно блок? Уточните, пожалуйста.
    – meine
    19 янв 2019 в 14:42
  • @meine блок div_1
    – Ayurpwnz
    19 янв 2019 в 14:53

1 ответ 1

1

Взрыв мозга, я так понимаю разметка с какого то генератора сайтов или их MS. Центровки нет, т.к. блоки по умолчанию 100% ширины, зажимайте, то что нужно центрировать. Или верстайте по другому. Да и верстка по ID не приветствуется. Вот ваш пример div2 зажат в размерах. Если нет, меняйте на id1 и будет работать.

body {
 background-color: rgb(14, 17, 37)
}
div {
  color: rgb(96, 118, 154);
  font: normal normal 400 normal 16px / 25.6px "Varela Round";
}
#DIV_2{
  margin: 0 auto;
  width: 500px;
  border: 1px solid white; /* Для примера! Удалить */
  padding: .5rem 1rem;  /* Для примера! Удалить */
}
<div id="DIV_1">
  <div id="DIV_2">
    <div id="DIV_3">
      <div id="DIV_4">
        <div id="DIV_5">
          <div id="DIV_6">
            <div id="DIV_7">
              <h1 id="H1_8">
                December 2018<br id="BR_9" />
              </h1>
              <h2 id="H2_10">
                <sub id="SUB_11">REPORT</sub>
              </h2>
            </div>
          </div>
          <div id="DIV_12">
            <div id="DIV_13">
              <div id="DIV_14">
                <h3 id="H3_15">
                  DIVIDENDS
                </h3>
                <div id="DIV_16">
                  Dividends (50%): € 3 441,93

                </div>
                <div id="DIV_17">
                  <p id="P_18">
                    Dividends per 1000 EFFM: € 0,02


                  </p>
                  <p id="P_19">
                    Private investors ROI : 0,57%

                  </p>
                  <p id="P_20">
                    Common investors ROI : 0,38%

                  </p>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="DIV_25">
        <div id="DIV_26" style="margin-left:100px">
          <div id="DIV_27">
            <div id="DIV_28">
              <h3 id="H3_29">
                Token private sale

              </h3>
              <div id="DIV_30">
                Mined Cryptocurrencies
              </div>
              <div id="DIV_31">
                <p id="P_32">
                  6074.68 ETC<br id="BR_33" /><span id="SPAN_34">(=228.407968 ETH)</span>
                </p>
              </div>
            </div>
          </div>
          <div id="DIV_35">
            <div id="DIV_36">
              <h4 id="H4_37">
                Mining Costs
              </h4>
              <div id="DIV_38">
                Mining Costs
              </div>
              <div id="DIV_39">
                <p id="P_40">
                  1961.1 ETC<br id="BR_41" /><span id="SPAN_42">(=73.73736 ETH)</span>
                </p>
              </div>
            </div>
          </div>
          <!--
                                <div id="DIV_43">
                                    <div id="DIV_44">
                                        <h4 id="H4_45">
                                            Veritium Costs
                                        </h4>
                                        <div id="DIV_46">
                                            (12% of Net income)
                                        </div>
                                        <div id="DIV_47">
                                            <p id="P_48">
                                                18.56047296 ETH
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                -->
          <div id="DIV_49">
            <div id="DIV_50">
              <h4 id="H4_51">
                Net Profit
              </h4>
              <div id="DIV_52">
                dividends &amp; reinvestment
              </div>
              <div id="DIV_53">
                <p id="P_54">
                  136.11013504 ETH
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="DIV_55">
        <div id="DIV_56">
          <div id="DIV_57">
            <h2 id="H2_58">
              <a href="/lets-talk.html" id="A_59">Our miners</a>
            </h2>
            <div id="DIV_60">
              <ul id="UL_61">
                <li id="LI_62">
                  AMD RX 580 : 50
                </li>
                <li id="LI_63">
                  Custom FPGA : 195
                </li>
              </ul>
            </div>
          </div>
          <div id="DIV_64" style="margin-left:-1000px">
            <h2 id="H2_65">
              <a href="/lets-talk.html" id="A_66">Token Sold (10th of December)</a>
            </h2>
            <div id="DIV_67">
              <ul id="UL_68">
                <li id="LI_69">
                  757265.9
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

8
  • Код был получен с помощью расширения snappysnippet, и сейчас пытаюсь переделать под себя.
    – Ayurpwnz
    19 янв 2019 в 15:10
  • Я только рекомендую. Код не сложный, и лучше написать самому. А так если оставить его, то уменьшайте размеры блока по ширине и от будет центрироваться по margin. Есть и более сложные варианты типа flexbox но ширину нужно однозначно уменьшать, т.к. при верстке как у Вас, появляется горизонтальный скролл. Не говоря уже о мобильной версии. 19 янв 2019 в 15:16
  • Я так понимаю по этой же причине блоки на моем разрешении отображаются нормально, а на любом другом они сдвинуты?
    – Ayurpwnz
    19 янв 2019 в 15:23
  • Не могли бы еще подсказать, как растянуть задний фон на всю ширину?
    – Ayurpwnz
    19 янв 2019 в 15:55
  • Да, блоки вы подгоняете на одно разрешение, что в коне неправильно. Задний фон чего? Всего документа или определенного блока. 19 янв 2019 в 17:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.