Выравнивание

Vertical align image and text in table

I found some articles and some threads here but none was exactly what I was looking for and I tried to modify them but didn’t work as I wanted. I have table with 1 row and 2 columns. The first column has a class with image — url(data). The other column has only text and I want to vertically align them both to middle. Html:

body < direction:rtl; >.more-time < display: table; width: 100%; color: dodgerblue >td.accordion_down < background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAaVJREFUSIm91c9KG1EUx/HvuRGzKVl2NxRnLD6DD1BoH2AOgWz6RxroypXgqiB0W+hGQSYiLoRm3FfotlAo3RUEF9USyEoQDIJlbDxdjC1VJ5mZNMnZzb3n3s/cxY8jS+0fc/DrEVOsKySZOeNBt8bRU8EWpwU7rOlilaQCdcNOpoEabEc6v+kANjXoCJWGQX/C6Lce1VcA7s9ipP5HkLUJumdGJYzVu7gBA/Tw3xiyPxnXLW3p3OHfr3+3YpU+zDaAzjhJQ95G6u/d+I3bTS31Tg0XGiTjQfnUw1+9vX4HTnH/C8jy/6N2ckm1HqvceUQmnOLBhsHu6Ch9odLYUa+btT8QBqhSaxp2MKL9Ok1Kdkne6eft4wVH/ytwr6hoyH5LgyfDeoa+GCCNgHtWFAU618kYWrkwQKT+nsG7vD6DxHBhS73TscAAPYIVQz4P75LlNBH5VRiOVZJLZsNBw8Rgt6XBRtH7CsMAO+p1s4aJYQdVas0yd5WCIXOYnF9BuK73z8vckxunQfWi/f2DYI+BeqTz78uenxkVTiPz82WkD0ujAL8B/TCG0encSKQAAAAASUVORK5CYII='); width: 12%; background-repeat: no-repeat; background-size: contain; display: table-cell; vertical-align: middle; >td.more-time-button

2 Answers 2

Your image is a background image so you need to position it with background-position: center;

for background you should use backgroun position with optional two parameters as xpos and ypos

backgroun-position:center center; 

here is the JSFiddle link check it out

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.17.43537

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Выравнивание элементов

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Пример 2. Использование valign

       
 
Колонка 1
 
Колонка 2
 
 
  

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

       
 
 
(18.6)
 
 
  

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

       
  Имя E-mail Комментарий  
  

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right» . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

Источник

Center image in table td in CSS

I’ve been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn’t exactly what I wanted Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.

related question: stackoverflow.com/questions/8639383/… Apart from giving the parent (here td) a style of text-align: center, you might have to give the child (here, img) a style of display: block or display: inline-block

9 Answers 9

or via css, which is the preferred method any more.

Simple way to do it for html5 in css:

The «text-align: center» approach seems to work if the image is an inline element. If you use «display: block» to get rid of the extra border pixels around the image, then you need to use this.

I once delivered a box to a man whose initials were CSS. I asked him if it was okay to leave the box in the center of the room. He kept reiterating that it should be placed where there would be an equal amount of «margin» from the opposing walls. «So, the center then?» I confirmed. He gave a blank stare, then explained the placement as «where an object would automatically end up if pushed equally from opposing directions». Once again I tried to verify that he meant the center, and again came a long and awkward pause. Yeah, CSS saw things differently from the rest of us.

This is better, as it affects ONLY the images. Other solutions applied to the td tag also affect texts.

Источник

Aligning Image and Text in CSS Table

I have seen several CSS alignment tips, but none relating to a table. My code for the table properties are as follows:

 table.pic < border-spacing: 1; >table.pic td < padding: 5px; border: 4px solid #cccccc; >table.pic tr:nth-child(odd) < background-color: #f2f2f2; >table.pic div

 
 
 
 
 
blahblah
 
poodle
 
noodle
 
 
 
 
 

No matter what change I try to make, the text still ends up on the cell to the right, but vertically it starts on the bottom line of the image. Anyone know what my issue is?

would wrap the text in a block element; with change to css to vertical align the div wrapper .

3 Answers 3

On jsfiddle the text is not align with the bottom edge of the picture, it’s vertically centered : http://jsfiddle.net/u3AW2/

Maybe you have overwrites somewhere.

The text is also vertically centered with :

aligns div elements, which are children of tables with a class of pic. I don’t see the div in your html.

to align all td elements of the table to vertical center.

to attempt to override any theme rules you can get more selective

table.pic < border-spacing: 1; >table.pic td < padding: 5px; border: 4px solid #cccccc; >table.pic tr:nth-child(odd) < background-color: #f2f2f2; >/* use more selectivity */ html body table.pic tr td

right click the element and select inspect element, look for any additional css rules that may be effecting the rules you are adding.

I had exactly the same issue and found it was because I was using a CSS Reset. For some reason this was conflicting with my style sheet. I was specifically using the one on Meyerweb. Are you using this reset? If so, try changing the first rule as follows:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

Источник

Css html img align center in table

Solution 2: This will add image in center in outlook. Solution 2: Update: this works by cheating the system and just putting the top image as the first row of the table that needs to be directly under it Solution: Solution 1: You need to set vertical alignment on the images themselves.

How do I center an image in a table in Outlook

On your table cell use following attributes:

for vertical and horizontal align.

This will add image in center in outlook.

HTML align Attribute, The HTML

How to Align Text and Image in HTML Table

For eg: to align the image at bottom of the page, ‘align-bottom’ is used inside the image tag Duration: 1:23

How to center an image in HTML

The result of this code is an image nicely aligned to the middle of the in your HTML page Duration: 5:13

Need to align table under image and place another table directly to the right of the image/table column

If you have the ability to use css in the HTML page within tags this should work for you: @media part of the CSS is to make the columns stack instead of sit next to each other on a narrow screen such as a phone; make sure to do testing and tweaking with the actual content to see if it behaves as intended.

     
 
 Sentricon + Termidor 
 Sentricon + Altriset
 Termidor Only
 Altriset Only
 Sentricon Only
 
Termite Inspection Graph & Treatment Specifications>
Name
> > > >
Address/Zip Code
>, >
Phone, Email
> > > >
Bill To Address
 
Agreement/Treatment is limited to the one structure listed above unless specified here 
 
#: >
Sq Ft: 
Linear Ft: 
Live Infestation
Prevention
Treatment

 
For Office Use Only
   

.row.Completed < background-image: url("/images/Completed.png"); background-repeat: no-repeat; background-size: 100% 100%; display: block; >.row.NotCompleted < content: url('/images/Notcomplete.png'); background-repeat: no-repeat; background-size: 100% 100%; /* display set to block element */ display: block; /*width: 100%; */ height: 100%; >td img

#logo-table td img, #logo-table td