центральное изображение в заголовке

Я нахожусь в программировании в фундаменте. Но я не могу понять, почему изображение в строке yelllow выравнивается влево? Я хотел бы, чтобы изображение было сосредоточено. Я пробовал все в документации, но это не работает для меня. Есть ли у кого-нибудь другое предложение?центральное изображение в заголовке

My Site Example

<body> 
    <table class="body"> 
    <tr> 
     <td class="center" align="center" valign="top"> 
     <center> 

      <table class="row" style="background-color:yellow;"> 
      <tr> 
      <td class="center" align="center"> 
      <center> 
       <table class="container"> 
       <tr> 
        <td class="wrapper last"> 
        <table class="twelve columns"> 
         <tr> 
         <td> 
          <img width="250" height="80" src="http://placehold.it/580x300"> 
         </td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
       </table> 
      </center> 
      </td> 
     </tr> 
     </table> 
     <br> 

     <table class="container"> 
     <tr> 
      <td> 
      <!-- content start --> 
      <table class="row"> 
       <tr> 
       <td class="wrapper last"> 
        <table class="twelve columns"> 
        <tr> 
         <td> 
         <h1>Hi, Elijah Baily</h1> 
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> 
         <img width="580" height="300" src="http://placehold.it/580x300"> 

         </td> 
         <td class="expander"></td> 
        </tr> 
        </table> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
     </center> 
    </td> 
    </tr> 
</table>

источник

2017-01-31 Ne Kr

В вашем примере сайта необходимо body, table.body, h1, h2, h3, h4, h5, h6, p, td со свойством text-align:left. и избавиться от display: block; float: left; от вашего класса img.

Обратите внимание, что если вы сделаете text-align:center, это повлияет на всю форму. поэтому сделайте для него еще один класс.

источник

2017-01-31 08:09:49 Minksmnm

@Ne Kr его работа. remove 'img { дисплей: блок; float: слева; } 'из вашего' 'элемента и в' 'над ним добавить' text-align: center' – Minksmnm

Работа, спасибо :-) –

Глядя на вашем примере сайта, <img> элемент имеет следующие стили:

img { 
    display: block; 
    float: left; 
}

Оба эти стили вызывают поведение. Во-первых, display: block заставляет элемент изображения занимать всю ширину своего контейнера, даже если само изображение не работает. Второй: float: left перемещает изображение в левую сторону контейнера.

Удалите оба эти стиля, и изображение будет центрировано.

источник

2017-01-31 08:03:52

Спасибо за комментарий. Я попытался удалить поле '/ * img.center { : 0 auto; float: none; } */', но изображение все еще выровнено по левому краю. Я просто загружу новый код прямо сейчас, по адресу, указанному в вопросе –

Вам также нужно удалить стиль 'display: block'. Дайте мне знать, когда вы загрузили новый код. –

Просто удалите класс «двенадцать столбцов» из заголовка вашего html, который обертывает логотип, и логотип будет центрирован. – Rahul

Вы должны добавить класс как «» topImage к изображению и добавьте следующий CSS в файл CSS:

.topImage { 
    float: none; 
    margin: 0 auto; 
}

источник

2017-01-31 08:09:34

Просто попробовал, что он ничего не делает –

Ответ Рахула должен работать. Удаление классов «двенадцать столбцов» и добавление класса «контейнер» не –

Удалить ширину часть из этого css:

table.container { 
    /*width: 580px;*/ 
    margin: 0 auto; 
    text-align: inherit; 
}

источник

2017-01-31 08:14:32 Rahul

Не делает ничего: -/http://vouzalis.com/template -test.html –

обновил ответ. Теперь он должен работать. – Rahul

центральное изображение в заголовке

ответ

Смежные вопросы