How to move anchor text up inside anchor tag?

Adam Breslin

I'm trying to get the anchor text to move up in the anchor tag. Here's the anchor text that says "play":enter image description here

I'm trying to make this anchor text that says "play" move up slightly by putting some padding at the bottom, but this doesn't seem to work when I try with p or span elements. I don't know if there is another way to get the text to move up, but I could use some help.

Here is my html code:

<!DOCTYPE html>
<html>
<head>
    <title>nested anchor links in divs</title>
    <link rel="stylesheet" href="styles/styling.css">
</head>

<body>
    <div id="outer-container">
        <div id="sidebar">
            <a href="#"><img src="images/play logo.webp" alt="play" id="play" height='25px' width='25px'><span>Play</span></a>
        </div>
        <div id="content">




        </div>
    </div>

</body>

</html>

CSS code:

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

#outer-container {
    display: table;
    width: 100%;
    height: 100%;
}

#sidebar {
    display: table-cell;
    width: 15%;
    height: 100%;
    vertical-align: top;
    background-color: rgb(68, 68, 68);
}

#content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
    background-color: gray;
}

#sidebar a {
    background-color: rgb(20, 15, 15); 
    color: white; 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
}

span {
    padding-top: 10px;
}

#sidebar img {
    padding-top: .5em;
    padding-right: .1em;
}
Nites

Juat added display: flex; align-items: center;to #sidebar a.

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

#outer-container {
    display: table;
    width: 100%;
    height: 100%;
}

#sidebar {
    display: table-cell;
    width: 15%;
    height: 100%;
    vertical-align: top;
    background-color: rgb(68, 68, 68);
}

#content {
    display: table-cell;
    width: 85%;
    vertical-align: top;
    background-color: gray;
}

#sidebar a {
    background-color: rgb(20, 15, 15);
    color: white;
    /* display: block; */
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

span {
    padding-top: 10px;
}

#sidebar img {
    padding-top: .5em;
    padding-right: .1em;
}
<body>
    <div id="outer-container">
        <div id="sidebar">
            <a href="#">
                <img
                    src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Youtube_colored_svg-512.png"
                    alt="play" id="play" height='25px'
                    width='25px'>
                <span>Play</span>
            </a>
        </div>
        <div id="content">
        </div>
    </div>
</body>

Related

How to center text inside anchor tag

Arsen Mkrtchyan I want the anchor tag to look like a button and created a JsFiddle with this style .details-button { background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent; border: 1px solid #FAB149;

Text inside anchor tag not showing

Bear No text is showing between my anchor tags and I don't know why. Can anyone help me? HTML： <div id="left"> <a class="links" href="#footer">Yolo</a> </div> CSS： .links{ display:block; width:100%; height:30px; border-bottom:2px solid orange; padding:10

Text inside anchor tag not showing

Bear No text is showing between my anchor tags and I don't know why. Can anyone help me? HTML： <div id="left"> <a class="links" href="#footer">Yolo</a> </div> CSS： .links{ display:block; width:100%; height:30px; border-bottom:2px solid orange; padding:10

How to move focus from one anchor tag to another anchor tag?

user 944513 I'm having some problems following siblings anchor tags. I have a parent DIVor wrapperseveral inside it DIVs(one of these divs has a rh02currentclass). I want to focus on the tags that exist in that DIV anchorwith the rh02currentclass . Steps to re

Node Js & Puppeteer - How to select text wrapped inside Anchor tag

Brógán McShane: I'm currently working on a project and I'm running into an error and need your help! Basically, I'm trying to select wrapped text within the following anchor tag <a href="..." class="productDetailsLink js-productName">Product Name</a> Here is m

How to insert text anchor inside script tag onload?

wj R. How to insert TEXT ANCHOR 1 as part of src value inside script tag? I will use it on tabbed content. Thank you. here . <a href="#">TEXT ANCHOR 1</a> <div class='tab'> <script type="text/javascript" src="/feeds/posts/summary/-/TEXT ANCHOR 1 WILL GO HERE?

Node Js & Puppeteer - How to select text wrapped inside Anchor tag

Brógán McShane: I'm currently working on a project and I'm running into an error and need your help! Basically, I'm trying to select wrapped text within the following anchor tag <a href="..." class="productDetailsLink js-productName">Product Name</a> Here is m

How to insert text anchor inside script tag onload?

wj R. How to insert TEXT ANCHOR 1 as part of src value inside script tag? I will use it on tabbed content. Thank you. here . <a href="#">TEXT ANCHOR 1</a> <div class='tab'> <script type="text/javascript" src="/feeds/posts/summary/-/TEXT ANCHOR 1 WILL GO HERE?

How to get <img> tag inside anchor <a> tag

Shakoor Ab I want to retrieve tags inside anchor tags. <pre> <a some properties> **<img src="" width="" height="" />** </a> </pre> I need to straighten up <img>. What I am doing is: if($(img_ads[k]).has("img").length) { console.log ($(img_ads[k]).

How to center an image inside an anchor tag?

sasswater You can view the results at this link . At the bottom of the page, on the far right, there is a circle with an image of a t-shirt. The image is not vertically centered correctly. The css for the anchor tag is this: .dfa { padding: 5px 5px; fo

How to add if condition inside anchor tag in reactjs

Krishnan_mon We have reactjs application. We pass a "text" to a function. In that function, we have anchor tags. Here I have to write if condition to check if the text is empty. If it is empty then we have to add aria-lable otherwise, just return the text. Pra

How to center an image inside an anchor tag?

sasswater You can view the results at this link . At the bottom of the page, on the far right, there is a circle with an image of a t-shirt. The image is not vertically centered correctly. The css for the anchor tag is this: .dfa { padding: 5px 5px; fo

How to output item value inside anchor tag

red virus Data obtained from the API is stored in GetBlogState . There is a Slug key in the data. I want to output that key value in the anchor tag so that it builds a link for that particular blog post, say /blog/test-1 . Below is what I am currently using.

Click on anchor tag with text

Tania How to click on anchor tag with specific text? For example, I have the following anchors in my page <a>one</a> <a>two</a> <a>three</a> Now, the user enters one. How to click a label with text as one? I tried this: var uservar='one'; $('a [text=$uservar]

Click on anchor tag with text

Tania How to click on anchor tag with specific text? For example, I have the following anchors in my page <a>one</a> <a>two</a> <a>three</a> Now, the user enters one. How to click a label with text as one? I tried this: var uservar='one'; $('a [text=$uservar]

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to make anchor tag clickable without text

zefum dajima I'm making a personal website linking to social media via the corresponding icons. But the link is not clickable. Here is a JSFiddle of my problem : http://jsfiddle.net/mufeeza/v9s7psf2/ <div class="linkedin icon"><a href="https://www.linkedin.com

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17

How to get text from anchor tag?

Waverly Felipe I want to get text from all anchor tags that have class="ip_click" in the page. Here's an exact example of what I'm getting: <a href="#" class="ip_click">177.1.1.1</a> <a href="#" class="ip_click">177.2.2.2</a> I want to get "177.1.1.1" and "17