Styjun

Aggressive Under-Indexing and no data for missing index

Yu-Gi-Oh cards in Python 3

How to avoid supervisors with prejudiced views?

how one can write a nice vector parser, something that does pgfvecparseA=B-C; D=E x F;

Do scriptures give a method to recognize a truly self-realized person/jivanmukta?

(How) Could a medieval fantasy world survive a magic-induced "nuclear winter"?

Why don't programming languages automatically manage the synchronous/asynchronous problem?

Why did early computer designers eschew integers?

Is it okay to majorly distort historical facts while writing a fiction story?

What steps are necessary to read a Modern SSD in Medieval Europe?

Can you teleport closer to a creature you are Frightened of?

What was Carter Burke's job for "the company" in Aliens?

Physiological effects of huge anime eyes

"Eavesdropping" vs "Listen in on"

What are the unusually-enlarged wing sections on this P-38 Lightning?

TikZ: How to fill area with a special pattern?

Ising model simulation

Lucky Feat: How can "more than one creature spend a luck point to influence the outcome of a roll"?

Is a distribution that is normal, but highly skewed, considered Gaussian?

Vector calculus integration identity problem

Defamation due to breach of confidentiality

Can I board the first leg of the flight without having final country's visa?

Why do we say 'Un seul M' and not 'Une seule M' even though M is a "consonne"

Is it correct to say moon starry nights?

Centering text (link) inside div

0

for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.

HTML

<div class="title">
 <a href="http://www.google.com">Work</a>
 </div>

CSS

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

When Inspecting in a browser, the '' is extremely large for some reason.

Thanks.

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

html css text hyperlink center

share|improve this question

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

add a comment | 

0

for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.

HTML

<div class="title">
 <a href="http://www.google.com">Work</a>
 </div>

CSS

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

When Inspecting in a browser, the '' is extremely large for some reason.

Thanks.

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

html css text hyperlink center

share|improve this question

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

add a comment | 

for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.

HTML

<div class="title">
 <a href="http://www.google.com">Work</a>
 </div>

CSS

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

When Inspecting in a browser, the '' is extremely large for some reason.

Thanks.

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

html css text hyperlink center

share|improve this question

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

<div class="title">
 <a href="http://www.google.com">Work</a>
 </div>

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

.title 

 position: absolute;
 background-color: red;
 z-index: 5;
 height: 15em;


.title a 

 height: 15em;
 font-size: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">

<div class="title">
			<a href="http://www.google.com">Work</a>
		</div>

share|improve this question

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

share|improve this question

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

asked Mar 21 at 19:09

Nathan WilsonNathan Wilson

6410

2 Answers
2

active

oldest

votes

0

The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:

.title a 
 height: 15em;
 font-size: 150px;
 line-height: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

https://jsfiddle.net/srza8bhk/

share|improve this answer

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

add a comment | 

0

remove height:15em from anchor tag. and set it's line-height should be less

like:

.title a 
 font-size: 150px;
 line-height: 1px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;
 

share|improve this answer

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

add a comment | 

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55287664%2fcentering-text-link-inside-div%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:

.title a 
 height: 15em;
 font-size: 150px;
 line-height: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

https://jsfiddle.net/srza8bhk/

share|improve this answer

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

add a comment | 

0

The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:

.title a 
 height: 15em;
 font-size: 150px;
 line-height: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

https://jsfiddle.net/srza8bhk/

share|improve this answer

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

add a comment | 

The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:

.title a 
 height: 15em;
 font-size: 150px;
 line-height: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

https://jsfiddle.net/srza8bhk/

share|improve this answer

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

.title a 
 height: 15em;
 font-size: 150px;
 line-height: 150px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;

share|improve this answer

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

answered Mar 21 at 19:26

LowkaseLowkase

5,04822346

0

remove height:15em from anchor tag. and set it's line-height should be less

like:

.title a 
 font-size: 150px;
 line-height: 1px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;
 

share|improve this answer

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

add a comment | 

0

remove height:15em from anchor tag. and set it's line-height should be less

like:

.title a 
 font-size: 150px;
 line-height: 1px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;
 

share|improve this answer

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

add a comment | 

remove height:15em from anchor tag. and set it's line-height should be less

like:

.title a 
 font-size: 150px;
 line-height: 1px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;
 

share|improve this answer

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

.title a 
 font-size: 150px;
 line-height: 1px;
 text-decoration: none;
 font-family: 'Inknut Antiqua', serif;
 

share|improve this answer

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725

answered Mar 21 at 19:34

jumah Mohammadijumah Mohammadi

725