How do I vertically align my multi-line p tag in my header?
Tags: html,css,sass
Problem :
I'm really struggling with vertically centering a p
tag in my HTML. I'm trying to follow the method found here, but I can't seem to get it to work.
.site-header {
background: #27112e url("/assets/header-bg.png") no-repeat;
height: 220px;
position: relative;
.inner-header {
font-family: "museo-sans", Avenir, sans-serif;
margin: auto;
max-width: 850px;
min-width: 150px;
width: 75%;
display: table;
.name {
float: left;
font-family: "ff-tisa-web-pro", Georgia, serif;
font-size: 1.8em;
line-height: 40px;
margin: 65px 55px 0 0;
display: table-cell;
vertical-align: middle;
}
}
}
The first two are just divs, and .name
is an h1
.
Hopefully that CSS is enough to make it clear what I'm trying to accomplish. I just want a "name" string that can be multiple lines long to be vertically centered no matter how many lines it's showing.
What am I doing wrong?
Solution :
Rewrite your CSS at first - to
.site-header {
background: #27112e url("/assets/header-bg.png") no-repeat;
height: 220px;
position: relative;
}
.inner-header {
font-family: "museo-sans", Avenir, sans-serif;
margin: auto;
max-width: 850px;
min-width: 150px;
width: 75%;
display: table;
}
.name {
float: left;
font-family: "ff-tisa-web-pro", Georgia, serif;
font-size: 1.8em;
line-height: 40px;
margin: 65px 55px 0 0;
display: table-cell;
vertical-align: middle;
}
I have not ever seen that your CSS code would be possible. Also you may improve your CSS with div.site-header div.inner-header h1.name
or div.site-header > div.inner-header > h1.name
.
And it would be good to change yourn code into:
<div class="site-header">
<div class="inner-header">
<h1 class="name">
</div>
</div>
as ElefantPhace says. Then all should be easier.
CSS Howto..
in order to change both vertical and horizontal color of borders you can use the following code in your css: .table-row-cell{ -fx-border-color: red; -fx-table-cell-border-color:red;} Also, you can change the border...
HTML <table> <tr class="windowbg2"> <td class="icon_windowbg"> icon windowbg </td> <td class="info"> info </td> <td class="stats_windowbg"> stats windowbg </td> <td class="lastpost"> lastpost </td> </tr> </table> CSS table ,td { border: 1px...
By using the wonderous display:table-* options: li { display:table-row; } li > span { display:table-cell; padding:3px; } As seen on jsfiddle And gives this: ...
The best thing to do is go through every problem one-by-one and fix it. The Chrome developer tools (Control+Shift+J) are very good at pointing out various errors and problems. Check...
I understood you wanted the central part to be flexible. You can use display: flex. Really basic CSS to show it: .player{ background: black; height: 100px; display: flex; } .button{...
I think, I know what you need. Research please, @media screen, @media print, @media all ...
Remove the 16px margin as follows: div#textright>p:first-child { margin-top: 0; } ...
It doesn't. Something on the server compiles SASS or whatever into regular CSS (and HAML or whatever into regular HTML, and Coffeescript into Javascript). Usually this is done as part...
add this .content { overflow: auto; margin-left:160px; } ...
You can use a asp:DataList control instead of Repeater to align it vertically or horizontally, as your choice. It provides a RepeatDirection attribute to do the same. https://msdn.microsoft.com/en-us/library/9cx2f3ks(v=vs.85).aspx...
You could use vertical-align: top; to override default vertical-align value that is baseline. figure.red { vertical-align: top; } Fiddle: http://jsfiddle.net/ytn6z8oo/1/...
CKEDITOR.addCss accepts string as a parameter, so there's no way to pass any path there. CKEDITOR.document.appendStyleSheet is correct though (fiddle): CKEDITOR.replace( 'editor', { on: { instanceReady: function() { this.document.appendStyleSheet( 'http://path.to.your.css'...
I wrote about the best way I've found to do this here - https://github.com/css-modules/css-modules/issues/199 Basically, it's just importing those styles from the original css file. Because those styles are all...
Modify your ./app/views/layouts/application.html.erb to only have the following content: <%= yield %> In other words, remove the <html>, <head>, and <body> tags. There are several other ways to achieve your...
This code is working as you expected. Default styling of the a tag is text-decoration: underline. You will have to set it none. span { text-decoration: underline; } h3 a:before...
need a wrap div for class="content" $results = $mysqli->query("SELECT * FROM content"); if ($results) { //fetch results set as object and output HTML while($obj = $results->fetch_object()) { echo '<div class="box"><div...
It would help if you could post the css as well. What you normally need is something like this <ul id="nav"> <li><a>one</a></li> <li class="active"><a>two</a></li> </ul> the css would be: #nav...
You can do this without JavaScript: .select-bldg-btn { display: none; } .select-bldg-listing:hover .select-bldg-btn { display: inline-block; } ...
You need to get the offset() of your iframe and iframe canvas then get the total top and left from both. Now you have to apply the top and left...
Well you can use https://software.intel.com/en-us/html5/tools to develop cross-platform apps. I used it to develop too. It is quite good but it only has one major issue: you can't use php....
Try this code DEMO <div class="container"> <img src="demo.jpg" alt="" /> </div> body{ margin: 0; } .container{ width: 200px; border: 1px solid red; //tmp added to check the height of container...
You can fix it by either add CSS to your current css file to correct it. Or make a new css specifically for each browser. That happens because each web...
You can add a media query to that css class: @media only screen and (min-width: 850px){ .fixed { top: 0%; width: 100%; text-align: center; bottom: auto !important; z-index: 9999; position:fixed...
All you need is as simple as this $('.nav-item, .submenu').on({ mouseenter: function () { $('.submenu').show(); }, mouseleave: function () { $('.submenu').hide(); } }); See demo Update: If you want to...
I found a good example on CodePen. In case the link goes down, here is the code: HTML: <div class="slider"> <div class="line"></div> <div class="subline inc"></div> <div class="subline dec"></div> </div> CSS:...
You do it by pixel density. @media only screen (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /*This will be...
If the panel-primary div is inside changecolor div .changecolor .panel-primary { background-color: #e1e1e1 !important; } If the panel-primary div is the same div in which changecolor class is getting applied...
Write like this: .class1{ background:red; } .class1.class2{ background:none; } ...
You have to set background-position: 50% 50%. Those -x and -y properties are only supported in Internet Explorer and Webkit browsers.
You can do this most easily with css3 transitions like this: li{ width: 572px; height: 20px; padding: 4px 14px 0px 14px; background: url('../images/black_op30.png'); background: rgba(0,0,0,0.3); border-bottom: 1px solid #2f2f2f; -moz-transition:...