I have a div and I would like to align a span element inside it. The span element should be aligned bottom and horizontally center of its parent div.    &lt;div style="position: relative; clear: both; float: left; border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;"&gt;       &lt;span style="border: none; background-color: green; margin: 0; padding: 0; border: 0; position: absolute; margin-left: auto; margin-right: auto; bottom: 0;"&gt;&amp;nbsp;&amp;nbsp;123.&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;     At the same time, the alignment of my span element is not working. The width of the span element will change all the time. I mean that it is not a fixed width element.  I'm looking for help with this, and a cross-browser solution. No JavaScript/jQuery allowed.
173
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. &lt;body&gt;     &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt;  How can I center a div vertically in all major browsers, including Internet Explorer 6?
48709
Every time I try to do something seemingly-simple in CSS, it doesn't work.  I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.  &lt;div id="contents"&gt;     &lt;img src="..." /&gt;     text text text text text text ... &lt;/div&gt;   So I want it to look like:  ------------------ | text text text | | text text text | | text text -----| | text text |    | ------------------   Doing it with a top-left or top-right image is cake:  #contents img { float:right; }  ------------------ | text text |    | | text text -----| | text text text | | text text text | ------------------   Now how do I push that to the bottom? The best I've come up with so far are:  #contents img { float:right; margin-top: 90%} // really needs to be 100%-160px  ------------------ | text text      | | text text      | | text text -----| | text text |    | ------------------   In this case the text does not print in the margin, so there is white space above the image.  #contents { position:relative; } #contents img { position:absolute; right:0; bottom:0; }  -or-  // move the img tag under the text in the html and: #contents img { float:right; margin-top:-160; }  ------------------ | text text text | | text text text | | text text -----| | text text | te | ------------------   In this case the text prints over or under the image.  So... how can I accomplish this?
73184
I can't figure out how to achieve the following layout with CSS (probably because I don't actually know CSS).  I have a bunch of divs like this:  &lt;div class="right"&gt; &lt;p&gt;1&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;2&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;3&lt;/p&gt; &lt;/div&gt; &lt;div class="left"&gt;  &lt;p&gt;4&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;5&lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt;6&lt;/p&gt; &lt;/div&gt;   (not the real contents)  Now I want the layout to look like two equal columns of divs, with the "right" ones on the right, and the "left" ones on the left, thus:  2 1 3 5 4 6   [Edit: In a previous version of this question I had textareas inside the divs, and the divs all had different names like "one" and "xyz".] I tried something like  div.right { width:50%; float:right; clear:right; } div.left { width:50%; float:left; clear:left;}   but it doesn't quite work: It produces something like:  2 1 3  4 5   6   (without the "clear"s, it blithely produces   2 1 3 4 6 5   which is not what is wanted).  It is apparent that it can be made to work if the divs are ordered differently, but I'd like not to do that (because these divs are generated dynamically if the browser has Javascript, and I don't want to change the actual order that is displayed in the absence of Javascript, for semantic reasons). Is it still possible to achieve the layout I want?  [For what it's worth, I'm willing to have it not work on IE or older versions of other browsers, so if there is a solution that works only on standards-compliant browsers, that's okay :-)]
49480
How can I get superscript done, only in CSS?  I have a stylesheet where I mark the external links with a superscript character, but I'm having a hard time getting the character aligned correctly.  What I have currently, looks like this:  a.external:after {   font-size: 50%;   vertical-align: top;   content: "+"; }   but it doesn't work.  Naturally, I'd use the &lt;sup&gt;-tag, only if content would allow for HTML...
89884
I am trying to position node(2) in a page in coordinates related to the page (origin at upper left corner of the body of the page). My code is:  \documentclass[border=10pt,a4paper]{memoir} \usepackage[total={16.51cm,21.59cm}, top=1.2in, left=0.9in, includefoot]{geometry} \usepackage{tikz} \usepackage{fancyhdr} \usepackage{comment} \pagestyle{fancy} \fancyhf{} \renewcommand{\headrulewidth}{2pt} \renewcommand{\footrulewidth}{1pt} \begin{document} \begin{tikzpicture} \node[](1) at (0cm,0cm) {1}; \node[](2) at (0.5\textwidth,-0.5\textheight) {2}; \end{tikzpicture} \vspace{1cm} \noindent \end{document}   For node(2) to be positioned in the centre of the page at (0.5\textwidth,-0.5\textheight) I have to create another node (1) in the origin, otherwise node(2) will be put at (0,0). I would like that someone could explain this strange behaviour.
89933
Hi, I want to create a table in my lightning component. I created 2 lightning:input fields and want to change the vertical alignment to "middle" but it does not work.   I tried to do the following:  &lt;td  class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   and this:   &lt;td&gt;&lt;span class="slds-align-middle"&gt;&lt;lightning:input /&gt;&lt;/span&gt;&lt;/td&gt;   and this:  &lt;td Style="text-align: center;vertical-align:top;" valign="middle"&gt;&lt;lightning:input /&gt;&lt;/td&gt;   I am using slds:      &lt;table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered"&gt;      &lt;thead&gt;...&lt;/thead&gt;      &lt;tbody&gt;       &lt;tr&gt; [td in the middle of the cell] &lt;/tr&gt;      &lt;/tbody&gt;     &lt;/table&gt;   I hope someone can help me. Thanks!
56181
I have the following type of code in my document:  \begin{align*}        (-m)+m &amp; \stackrel{\mathrm{Ax 1.1 (i)}}{=}  m+(-m)\\   &amp;\stackrel{\mathrm{Ax 1.4}}{=}  0 \   I want to align on the = but that is complicated by the fact that there is something hovering over it.  It would seem to be easier to align their centers (no matter what, that is where the = will be).  How can I center a column in align (or align* to be honest, I am not that clear on the difference)
51545
Does anyone know how to make text align top-to-bottom in a div.  SO won't even let me demonstrate it . . . I just want the letters to stack on top of each other in a vertical line down the page like the stories of a building. Was hoping I didn't need to do it with an image.
14534
I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.  I encounter the same problem as . However, the post does not have proper solution. I've searched everywhere for a solution and can't find one. Surely I can't be the only one trying to do this.  Does anyone have any ideas?  P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.    .nav { margin: 0; padding: 0; } .nav li {      list-style: none;      display: inline;      border-left: #ffffff 1px solid;  } .nav li a:link, .nav li a:visited {      text-decoration: none;      color: #000;      margin-left: 8px;      margin-right: 5px;  } .nav li a:hover{      text-decoration: none;      font-weight: bold;  } .nav li.first { border: none; } &lt;ul class="nav"&gt;     &lt;li class="first"&gt;&lt;a href="#"&gt;item 0&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;
121146
I'm trying to align the tops of two images using the subfigure environment from the subcaption package. Unless I'm misinterpreting the other questions, I believe I have read multiple questions asking the same,  and  are two examples. The problem is, those answers don't seem to work as I expected, and I still can't get the tops of the images to be aligned.   example:  \documentclass{article} \usepackage{subcaption} \usepackage{graphicx} \usepackage{mwe} \begin{document}     \begin{figure}         \centering         \begin{subfigure}[t]{0.45\textwidth}             \includegraphics[width=\linewidth, height=20em]{example-image-a}             \caption{taller image}         \end{subfigure}         \begin{subfigure}[t]{0.45\textwidth}             \includegraphics[width=\linewidth, height=15em]{example-image-b}             \caption{shorter image}         \end{subfigure}         \caption{two images}     \end{figure} \end{document}   For me this generates the following:   I would have expected it to align the tops of the images. How do I do this?
86942
I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.  I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.  The following is a simplified version of my style sheet.  #container {    height: auto;    width: 100%; }  #container #mainContentsWrapper {    float: left;     height: 100%;    width: 70%;    margin: 0;    padding: 0; }   #container #sidebarWrapper {          float: right;     height: 100%;    width: 29.7%;    margin: 0;    padding: 0; }   Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?
17969
I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor.  I have tried all values for z-index from 0 - 999999. Can anyone tell me why this is happening?  Is there any minimum or maximum value of Z-INDEX property of CSS?    .divClass {      position: absolute;       left: 25px;       top: 25px;       width: 320px;      height: 300px;       z-index: 1000;  } &lt;table cellspacing="0" cellpadding="0" width="100%"&gt;   &lt;tr&gt;     &lt;td&gt;       &lt;asp:HyperLink ID="lnkProgram" runat="server"&gt;&lt;/asp:HyperLink&gt;     &lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;      &lt;td&gt;          &lt;div class="divClass"&gt;            Some Data          &lt;/div&gt;      &lt;/td&gt;   &lt;/tr&gt;  &lt;/table&gt;     I am showing and hiding the div with .divClass onclick via the &lt;asp:hyperlink&gt; using jQuery.
51982
I need a CSS selector that can find the 2nd div of 2 that has the same class. I've looked at nth-child() but it's not what I want since I can't see a way to further clarify what class I want. These 2 divs will be siblings in the document if that helps.  My HTML looks something like this:  &lt;div class="foo"&gt;...&lt;/div&gt; &lt;div class="bar"&gt;...&lt;/div&gt; &lt;div class="baz"&gt;...&lt;/div&gt; &lt;div class="bar"&gt;...&lt;/div&gt;   And I want the 2nd div.bar (or the last div.bar would work too).
8041
How do I go about setting a &lt;div&gt; in the center of the screen using jQuery?
2783
Related (but not the same):         Earlier today I asked a question about aligning equations in an enumerate environment and got an answer that seemed to work for the example I gave, but it turns out I wasn't really specific enough for my problem.  I'm using align* environments, often as the only part of a list item. (If you're wondering why I'm not using more words to introduce the align*, these are mostly homework solutions where most of the work is algebra, etc.)  Here's my code and what it makes (above the middle line):  \begin{enumerate}   \item \begin{align*}     x^2 + y^2 &amp;= x^2 + (iy)^2 \\               &amp;= (x + iy) (x - iy)   \end{align*}   \item \begin{align*}     \frac{1}{n^2-4} &amp;= \frac14 \frac{4}{(n-2)(n+2)} \\                     &amp;= \frac14 \left( \frac{1}{n-2}-\frac{1}{n+2} \right)   \end{align*} \end{enumerate}     I'm trying to make the baseline of the first line of the align* environment the same as the number's baseline—I want the first line of the align* to have the same vertical position (centered horizontally in the same way) relative to its number as in the second half of my picture. (Side question: why is there so much space before the align* starts?)
16899
Do you know an elegant way to align multiline nodes according to first line, e.g. for use in a legend?  Compare this example:  \documentclass{article} \usepackage[%   paperwidth=7.5cm,%   paperheight=5.5cm,%   margin=0.25cm,%   marginparwidth=0cm,%   centering,% ]{geometry} \usepackage[utf8]{inputenc} \usepackage[T1]{fontenc} \usepackage{xcolor} \usepackage{tikz} \usetikzlibrary{positioning} \pagestyle{empty} %%%%%%%%%%%%%%%% \begin{document} \sffamily %--------------------------------------% \newlength{\tikztwo} \settowidth{\tikztwo}{\,two (2) lines\,} \newlength{\tikzthree} \settowidth{\tikzthree}{\ three (3)\,} %--------------------------------------% \begin{tikzpicture}[very thick,every node/.style={node distance=0.2cm}]   % The grid:   \draw[step=0.1cm,very thin, lightgray] (0,0) grid (6,4.5);   \draw[step=0.5cm,thin, gray] (0,0) grid (6,4.5);   %------------------------------------------------%   % Only for comparison:     \draw[blue,text=black] (0.25,3.5) -- (1,3.5)       node[anchor=west]{one line entry};   %------------------------------------------------%     % No positioning at all, "anchor=north west" is even worse:     \draw[magenta,text=black] (3.25,3.5) -- (4,3.5)       node[anchor=west,text width=\tikztwo]{two lines entry 0};   %------------------------------------------------%     % First attempt, node (A) only for positioning:     \draw[green] (0.25,2.5) -- (1,2.5) node[anchor=west](A){two};     \draw (2.12,2.285) node[text width=\tikztwo]{two (2) lines entry 1};     % Second attempt, node (posA) only for positioning:     \draw[green] (3.25,2.5) -- (4,2.5) node[anchor=west](nodeA){} node[anchor=west](posA){two}       node[below right=-0.439cm and -0.276cm of nodeA,text=black,text width=\tikztwo]       {two (2) lines entry 2};   %------------------------------------------------%     % First attempt, node (B) only for positioning:     \draw[red] (0.25,1.5) -- (1,1.5) node[anchor=west](B){three};     \draw (1.88,1.048) node[text width=\tikzthree] {three (3) lines entry 1};     % Second attempt, node (posB) only for positioning:     \draw[red] (3.25,1.5) -- (4,1.5) node[anchor=west](nodeB){} node[anchor=west](posB){three}       node[below right=-0.411cm and -0.276cm of nodeB,text=black,text width=\tikzthree]       {three (3) lines entry 2}; \end{tikzpicture} \end{document}   You can see first a two line node without positioning. After that I show the two attempts to manage what I want. Both have drawbacks, though: With both the positioning is done manually. With he first one you have to change the coordinates of the nodes, if you change the coordinates of the path. With the second this one does not happen, but you have to change the coordinates, if you change the text, exactly if a sign with uppercase length is added or removed (remove the number with the brackets for a test). Also it is not intuitive, that there I have to change the second coordinate to have an effect in the x-axis and vice versa.  BTW: The nodes that I marked “only for positioning” can be removed or commented out after the work is done.
96569
The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?