html - how to apply vertical-align: middle at div -
I have searched it online and found some solution but nothing works on my project, in most solutions, I have found:
& lt; div class = "a" & gt; & Lt; div class = "b" & gt; Unknown stuff should be focused & lt; / Div & gt; & Lt; / Div & gt; .a {display: table; Width: 100%; }. b {display: table-cell; Text align: center; Vertical-row: middle; } By implementing this technique, I have tried to create something like this:
The text in the left column is only required to stand in the middle Was there. But, it is not working with that technology:
& lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text sample text sample text sample text sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "left" & gt; & Lt; P & gt; Sample text & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; P & gt; Text & lt; / P & gt; & Lt; P & gt; Input element & lt; / P & gt; & Lt; P & gt; Table & lt; / P & gt; & Lt; P & gt; Image & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; CSS:
.ro {width: 100%; Background: #ccc; Border bottom: 1px solid # 999; Display: Table; }. Left {float: left; Width: 40%; Padding: 20px; Exhibit: Table-Cell; Vertical-row: middle; } .right {float: right; Background: #fff; Width: 40%; Padding: 20px; } How can I make the left-column text vertically in the middle? Note: I can not use a certain height because the contents of each row will be different
.left {width: 40%; Padding: 20px; Exhibit: Table-Cell; Vertical-row: middle; } Excluding "float: left". Removes that problem from the Left style, but it is not good to use the table and the div together.
Comments
Post a Comment