centering

How do I center text on top of an image in both dimensions?

旧城冷巷雨未停 提交于 2019-12-10 10:44:12
问题 Thank you all for your prompt feedback, it has been very helpful. One issue remains: Neither line-height , nor padding seem to be able to center both text that is long enough to wrap around and text that fits neatly on one line in the middle of the picture when applied in a table cell. Oddly enough, the padding solution provided below by SwDevMan81 works flawlessly when applied to a div, but not a table cell... I apologize in advance for my naivety; this is my first foray into HTML and CSS.

Vertically center div in a div with height auto

限于喜欢 提交于 2019-12-10 10:15:37
问题 Well, I got this structure: #parent{ max-width: 800px; height: auto; margin: auto; } #child{ position: absolute; width: 100%; height: 52px; display: none; } <div id="parent"> <div id="child"></div> </div> The child div is hidden per default. It gets visible by using jQuery (.fadeIn). Now the question is, how can I vertically center the child element by using only css? 回答1: I have created a prototype... But I had to modify your HTML and CSS so it might not be the best solution: http://jsfiddle

Centering in the unknown

筅森魡賤 提交于 2019-12-08 08:30:41
问题 I would like to center and clamp the dimensions of a child div inside its parent. <style type='text/css'> .parent { width: 100%; height: 100%; } .child { max-width: 100%; max-height: 100%; } </style> <div class="parent"> <div class="child"> <img src='dog.jpg' /> </div> </div> Here are the constraints: The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100% . The width and height of the child div are unknown. In one use case, the child div contains an

Select different CSS style sheet for different browser window sizes?

拥有回忆 提交于 2019-12-08 07:09:25
I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position. Here's how I center my div--you can see why the top of the div gets cut off in smaller browser windows. {position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px;

Select different CSS style sheet for different browser window sizes?

主宰稳场 提交于 2019-12-08 05:11:20
问题 I have my div (#box) centering in the middle of the browser window which is groovy for browsers that are 600px vertical or taller. If the window is smaller than that, content at the top of the div gets sheared off, and the scroll bar only scrolls the page up (when I pull the scroll bar down), so it's impossible to see anything hidden above the top edge of the window even when the scroll bar is at its top-most position. Here's how I center my div--you can see why the top of the div gets cut

Retrieve the right position of a subView with auto-layout

拟墨画扇 提交于 2019-12-08 02:29:10
问题 I want to place programmatically a view at the center of all the the subviews created in a storyboard. In the storyboard, I have a view, and inside a Vertical StackView, which has constraint to fill the full screen, distribution "Equal spacing". Inside of the Vertical Stack View, I have 3 horizontal stack views, with constraint height = 100, and trailing and leading space : 0 from superview. The distribution is "equal spacing" too. In each horizontal stack view, I have two views, with

jQuery function triggered on window resize but not on page load

ぐ巨炮叔叔 提交于 2019-12-07 15:22:36
问题 I found this jQuery code that allows to center a div that doesn't have fixed dimensions both horizontally and vertically. It works with the window height and width. So when I resize the window, the div is still centered within the window. My issue is that, right now, it doesn't work unless I resize the window first. So if I just load the page, the div isn't centered unless I manually resize the window. This, of course, is not ideal. So I'm trying to find a way around it. But my jQuery skills

Centering in the unknown

孤人 提交于 2019-12-06 14:50:00
I would like to center and clamp the dimensions of a child div inside its parent. <style type='text/css'> .parent { width: 100%; height: 100%; } .child { max-width: 100%; max-height: 100%; } </style> <div class="parent"> <div class="child"> <img src='dog.jpg' /> </div> </div> Here are the constraints: The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100% . The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video. The width and height of the child div must be constrained to

Creating a vertically and horizontally centered html div

假装没事ソ 提交于 2019-12-06 13:43:08
问题 I am trying to create a page similar to Google's homepage. It is to have a centrally located input box and a div on top of the page displaying links. I also want the page to resize itself dynamically if I change the size of the browser window. I have achieved partial success using yui2 grid css and a table. Here's a snippet: <body> <div id="doc3"> <div id="hd"><a style="float:left" href="link1.com"> link1</div> <div id="bd" style="display: table; height: 400px;"> <div style="display: display:

Retrieve the right position of a subView with auto-layout

橙三吉。 提交于 2019-12-06 11:25:41
I want to place programmatically a view at the center of all the the subviews created in a storyboard. In the storyboard, I have a view, and inside a Vertical StackView, which has constraint to fill the full screen, distribution "Equal spacing". Inside of the Vertical Stack View, I have 3 horizontal stack views, with constraint height = 100, and trailing and leading space : 0 from superview. The distribution is "equal spacing" too. In each horizontal stack view, I have two views, with constraint width and height = 100, that views are red. So far, so good, I have the interface I wanted, Now I