How do I Align The Border Of Text To An Image? (HTML/CSS) | (Extra [Answered]): How do I Fullscreen with Inspect? |


Tags: html,css,inspect

Problem :

This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.

Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:

HTML

<div id="div06">
    <img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
    <span id="span01">Facebook</span>
</div>

CSS

#div06
{
    margin-top:3%;
    display:inline-block;
    width:100%;
    line-height:100%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01
{
    border:3px solid blue;
    padding: 35px;
    margin: 25;
}

Here is my current edit:

#div06{
  margin-top:3%;
  width:100%;
  line-height:100%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01{
    border:3px solid #3b5998;
    color:#000000;
    font-family:arial, bold;
    font-size: 30px;
    padding: 35px;
    margin: 25;
}

It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?

Also if you need the full code I will provide it below.


Full Code


HTML

<head>
    <!--
    Assignment: Personal Website
    Date:  10/4/16
    Name:  Bradley Elko
    -->
    <link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
    <div id="div01">
        <h1 id="h101">Bradley's Website</h1>
    </div>
    <div id="div02">
        <h3 id="h301"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Band</a></h3>
        <h3 id="h302"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Handlers</a></h3>
        <h3 id="h303"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Ideas</a></h3>
    </div>
    <div id="div03">
        <div id="div04">
            <h2 id="h201">Formal Unknown Cereal Killer</h2>
        </div>
        <div id="div05">
            <p id="p01">Date: 10/05/2016 (Latest Update)
            <blockquote>
                Summary:
                <br/>
                <br/>
                Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
            </blockquote>
            <div id="div06">
                <img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
                <span id="span01">Facebook</span>
            </div>
            <div id="div07">
                <img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
            </div>
        </div>
    </div>
</body>

CSS

a:link{
    color:#1a0000;
    border-right:2px solid;
    border-left:2px solid;
    padding:5;
}
a:visited{
    color:#950f0f;
}
a:hover{
    color:red;
}
a:focus{
    color:#eeeedd;
}
#div01 {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:80px;
    bottom:90%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:25px;
    background-color:#73778c;
    color:#950f0f;
    text-align:center;
    border-top:3px solid #950f0f;
    border-bottom:2px solid #950f0f;
    padding-top:0;
    display:inline-block;
}
#h101{
    margin-top:10;
    margin-bottom:10;
}
#div02{
    position:fixed;
    top:85px;
    left:0px;
    right:0px;
    display:inline-block;
    background-color:#73778c;
    color:#950f0f;
    border-bottom:2px solid #950f0f;
    text-align:center;
    padding-top:5;
    padding-bottom:5;
    font-family:verdana;
    font-size:12px;
}
#h301{
    display:inline;
}
#h302{
    margin-left :20%;
    margin-right:20%;
    display:inline;
}
#h303{
    display:inline;
}
#div03{
    position:fixed;
    padding-top:0;
    top:114px;
    left:0%;
    right:0%;
    bottom:0%;
    background-color:#73778c;
    color:#950f0f;
    border-bottom:3px solid #950f0f;
}
#div04{
    font-size:30;
    text-align:center;
    margin-top:-30;
}
#h201{
    font-family:Times New Roman;
}
#div05{
    margin-left:100;
    margin-right:100;
    margin-bottom:100;
    margin-top:-30;
    padding-top:10;
    padding-bottom:10;
    padding-left:30;
    padding-right:20;
    border:3px solid #950f0f;
    background-color:#e0e0d1;
}
#div06{
    margin-top:3%;
    display:inline-block;
    width:100%;
    line-height:100%;
}
#div07{
    margin-top:3%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01{
    border:3px solid blue;
    padding: 35px;
    margin: 25;
}
#img02{
    width:10%;
}

Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].



Solution :

My friend told me I should use a table and it worked! Here is the snippet of code:

HTML

<table>
    <tr>
        <div id="div06">
            <th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
            <th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
        </div>
    </tr>
</table>

CSS

#img01
{
    width:100px;
    height:100px;
    vertical-align:middle;
}
span.span01
{
    border:3px solid #ffffff;
    color:#000000;
    font-family:arial;
    font-size: 16px;
    padding:38.5px;
    margin: 25;
}

    CSS Howto..

    How to make css a:active work after the click?

    CSS how to select nav and li tags but exclude specified class?

    How to remove CSS Class in aspx pages source codes using Regex?

    How to iterate over node var in Primefaces tree to set icons in CSS class from DB

    How to make this div using html and css?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    Using Susy, how can I make a div expand to height of tallest sibling?

    How to style CGI python with CSS?

    How to position a scroll box on top of an image using only inline CSS

    How to create a code block on website

    How to show one element when click on the another element with css?

    How to make an entire div clickable with CSS [closed]

    How to load local copy of bootstrap css when the cdn server is down?

    How to align jQuery div to bottom left corner using CSS?

    How to apply CSS styles to links that appear in table headers?

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to apply !important using .css()?

    How to explain using browser.sleep in protractor

    How do I make a CSS triangle with smooth edges?

    how to align css content string

    How to get the first letter of each word to be a different size and the rest to be the same size

    How to do make CSS Toggle like this? [closed]

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    Angular 2 Materialize CSS Side-Nav Not Showing

    how to write this code as link click animation

    How to give different views for same url for different devices with same resolution?

    How to place a button in the middle of the page using HTML and CSS

    How to remove the border that show after clicking a picture

    How can I divide the screen to these divs in css?

    How to apply a css class to master page based on the url using jquery? [closed]

    ? [closed]
    How to create a underline with small break in middle with css?
    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]
    Any ideas how to replicate this inline dropdown menu using css/jquery
    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?
    how to arrange 2 images side by side in mobile view?
    How can I mix vertically-centered elements with different font sizes and retain consistent line height?
    How to scroll draw each SVG path one at a time (chronologically)?
    How to make information appear only when hovered over using jquery and css?
    how to center image + text in an li Element
    How to create a pixel perfect divider using css border [closed]
    How do i create custom grid class in Bootstrap for lg as well as xs screen size?
    How can I put an input element on the same line as its label?
    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”
    Issue with floating divs - how can I have the widgets alongside the posts, not below?
    How Can I remove the injected CSS Resource in GWT?
    How to provide responsive design for svg?
    How do you customise HTML select option menus? [duplicate]
    How to give the background-image path in CSS?
    CSS / Jquery How to auto-size containers and images
    How to target element which have spaces in it's class name css?
    How to insert image as background using CSS?
    How to make a table with no cells-per-row defined only with CSS
    How to apply ckeditor css to output
    How to position my embedded flash file
    EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems
    Slideshow with specific Text on each Image
    How to load CSS for different URL in spring MVC app
    How to change ol bullets for clickable images
    How do i set 100% in a div tag background?