How to align this header on the middle using css - html

I am using the bombax wordpress theme. As the description isn't showing up when I use an image for header, I decided to tweak the html/css to show the site slogan on the middle of the header.
This is the site:
http://www.noticiasnaturais.com/
This is the image I want to center (without overlapping the logo at left, the leaves with site name):
http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png
This is the original theme html:
<div id="headerwrap">
<div class="clear"></div>
<a href="http://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/logoHeader.png" alt="Notícias Naturais" title="Notícias Naturais">
</a>
</div>
I then tried to change as follows, adding adiv around the href to float it to the left, add an outer div to float to the right (filling the rightmost space), and a third div to be aligned at the middle.
<div id="headerwrap">
<div class="clear"></div>
<div style="float:left"><a href="https://www.noticiasnaturais.com/" title="Notícias Naturais" style="color: rgb(51, 51, 68);">
<img src="http://www.noticiasnaturais.com/wp-includes/images/imagefile" alt="Notícias Naturais" title="Notícias Naturais">
</a></div>
<div style="float:left;height: 100%";align=center><img src="https://i.stack.imgur.com/JzdyG.png">
</div>
</div>
Edit: Just clarifying the question, I need the image with the text to be on the right side of the logo. At this moment I have it directly on the background image, but that doesn't work for all screen resolutions. None of the suggestions (so far) could get it right.

I'm not 100% sure of what you are asking, but I think what you need to do is this:
<div style="float:left;height: 100%; margin-left:auto; margin-right:auto;">
That should center the image.

When you remove float: left from the div and add clear: both; text-align: center, it stretches over the whole width and stays below the leaves image. Then you have the centered image
<div style="clear: both; height: 100%; text-align: center">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
JSFiddle
Note, that the align attribute is deprecated.
Update:
When you want the text image stay on the same line, you must give a minimum width to the div and center as before with text-align: center
HTML
<div id="middle">
<img src="http://www.noticiasnaturais.com/wp-includes/images/descricao_site.png">
</div>
CSS
#middle {
min-width: 800px;
text-align: center;
}
JSFiddle

Related

I want to float the image into the center with having the ability of writing left and right next to it, but float: center does not even exist

float: center dose not even exist
I tried a lot of methods, yet non of them worked.
I search for a solution, and all of them were align left or right with the text on the opposite side. But there was not align center with text in both sides... So, a solution, please. Preferably writing the style in the img tag...
This is my html so far:
<img style="float: center; margin: 0px 15px 15px 0px;" src="image.png"/>
So there is no float: center. However you could use float:left; on all elements. It will float left in order and if there all from a small size they will be placed next to eachother like this.
<p style="float:left;">Left</p>
<img style="float:left;" src="#">
<p style="float:left;">Right</p>
But then a again this method is really tricky and there are much better ways to structure you code and layout. Flex-boxes for example. A bit harder to understand, but once you'll get it it's very helpfull.
/*This external css is just for show*/
div{
text-align: center;
border: solid 1px black;
}
<!-- This is the minimum code you'll need -->
<div style="display:flex;">
<div style="flex:1;"> <p>BlaBla</p> </div>
<div style="flex:1;"> <img src="#"> </div>
<div style="flex:1;"> <p>and some more blabla</p> </div>
</div>

Text top align on CSS

I have created an HTML framework to display a top banner containing an image a centered title and a clock, below it, there is a stage area to display some graphs and images.
The problem I am encountering is that when I increase the font size of the title in the banner, I am left with some white space above, and with increasing the font size, the text disappears (I have set the containing div to hide the overflow). Ideally, this spacing could be reduced with some property.
I tried searching for aligning the text to the top, but unfortunately I just cannot find it! The behaviour is present even when the text and its div are the only things in the document.
Link to the jsFiddle with the whole page here
Link to the isolated div here
Is there a property I am missing, or another trick to move the text upwards?
<div id="banner" style="width:100vw;height:10vh;overflow:hidden">
<div id="bannerLeft" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:red">
img
</div>
<div id="bannerMiddle" style="width:70vw;height:100%;overflow:hidden;float:left;background-color:blue">
<p style="text-align:center;font-size: 2.5em;">Staged Title</p>
</div>
<div id="bannerRight" style="width:15vw;height:100%;overflow:hidden;float:left;background-color:green">
<p id="timeNow" style="font-size: 2.5em;text-align:center">
10:00
</p>
</div>
</div>
<div id="stage" style="width:100vw;height:85vh;overflow: hidden;background-color:yellow">
Stage is managed with JS
</div>
The problem is the <p> tag inside the div. You realy don't need it here. Remove it, and add the styling to the div element:
Staged Title
Demo:
.bannerMiddle {
width: 70vw;
height: 10vh;
overflow: hidden;
float: left;
background-color: blue;
text-align: center;
font-size: 2em;
}
<div class="bannerMiddle">
Staged Title
</div>
<br style="clear: left"><br>
<div class="bannerMiddle">
<p>Staged Title (BAD)</p>
</div>

Vertical aligning the div in div that was using margin-auto

I have this jsfiddle: Sample
As you can see 2 divs are align together side by side, what I want is to vertically aligning them. Also I want to be able to add another div to float to the right which is also vertical aligned.
How can I able to aligned them without using absolute positioning?
<div style="background-color: blue; ">
<!-- Global Header -->
<div class="header">
<div class="floatLeft">
WritePub
</div>
<div id="pcontainer" class="inner-header-search floatLeft">
<input type="text"/>
</div>
</div>
</div>
Your fiddle is too noisy. If you want to vertical align the contents of a div without touching its height you can add "display: table-cell" to the div to simulate a table row column which gives you alignment.
http://jsfiddle.net/5peh12th/2/
<div class="container">
Hello: <input type="text-box"/>
</div>
.container {
display: table-cell;
width: 800px;
background-color: red;
height: 50px;
vertical-align: middle;
}
or you can just not give the div a height and give top and bottom padding of equal numbers

Center div vertically when img tag is not displayed

I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/

HTML Using DIV vs. Table

What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)