css - positioning the text in the center of li tag -
I have created three blocks using the HTML code as shown below. The minimum height in the "A" tag is CSS property , Due to which it will be displayed as a block. I can not insert text inside the Span tags in the center of the " CSS: Please tell me where I am going wrong Try it under the CSS. li " tag. Although each text inside the tag is of a different length, I want to display them at the center.
& lt; Div class = "container" & gt; & Lt; Div class = "col-md-12" & gt; & Lt; Ul id = "tab" category = "new-tab" & gt; & Lt; Li class = "col-md-4 nav-list" & gt; & Lt; A href = "#" class = "new-block" & gt; & Lt; Span class = "header" & gt; Data & lt; / Span & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; Li class = "col-md-4 nav-list" & gt; & Lt; A href = "#" class = "new-block" & gt; & Lt; Span class = "header" & gt; Chart & lt; / Span & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; Li class = "col-md-4 nav-list" & gt; & Lt; A href = "#" class = "new-block" & gt; & Lt; Span class = "header" & gt; Report & lt; / Span & gt; & Lt; / A & gt; & Lt; / li & gt; & Lt; / Div & gt; & Lt; / Div & gt;
.container ul {List-style: None is out; } Li {Display: List item; } .col-md-4 {width: 33%; } .nav-block {background-color: # FFA500; Display area; Minimum height: 70px; Status: Relative; }. Container .nav-block .header {color: #FFFFFF; Font size: 2em; font-weight: bold; Left: 20%; Padding: 5px; Status: Relative; Text align: center; Top: 21%; }
.nav-block {background-color: # FFA500; Display area; Minimum height: 70px; Status: Relative; Text align: center; / * Make new edits *. Container .nav-block .header {color: #FFFFFF; Font size: 2em; font-weight: bold; / * Left: 20%; - * Remove / padding: 5px; Status: Relative; Text align: center; Top: 21%; }
Comments
Post a Comment