place logo and text within the logo height

Hi All,
Advance thanks
In cshtml i want something like image at the left  . Heading and sub text should within image height . Heading in bold and sub heading in normal text

---------------------------------------------------------------------------------------------------------------
         -
  img -                                            Title at the center
          -
          -                                                    some text(in middle of title text)
--------------------------------------------------------------------------------------------------------------------------

<div>

            <img class="img-valign" src="~/images/mainPageLogo_1.jpg" style="width:60px;height:60px;" alt="" />
            <span class="text2" style="text-align:center">some text2</span>
            <span class="text2">text2</span>

      </div>

Kind regards,
Pooja
poojasureshkumarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jose Gabriel Ortega CEE Solution Guide - CEO Faru Bonon ITCommented:
I think that you should just see this video

https://www.youtube.com/watch?v=23bpce-5s8I

and try to do it by urself I don't think is too hard (at least with boostrap4).
0
NerdsOfTechTechnology ScientistCommented:
<div>
 <div style="float:left"><img class="img-valign" src="~/images/mainPageLogo_1.jpg" style="width:60px;height:60px;" alt="" /></div>
 <div class="text2" style="float: right; text-align:center">Title<br>text2</div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Not sure if your environment supports flex box but you could do this
<div style="display:flex; flex-direction: row; flex-wrap: nowrap;">
   <img src="images/foreground1.png">
   <div style="display: flex; flex-direction: column;flex-grow:1; text-align: center">
         <h1>Title at the center</h1>
         <p>Title at the center</p>
   </div>
</div>

Open in new window

This does not quite meet the spec. If I understand you correctly you want the title centered relative to the entire width of the page and the content of the box centered relative to its container?

There are different ways of doing that - here is one way you can do it. Position your title absolutely and give it a right value of 50vw then translate it left on the X axis by 50%. Then give your container a align center style and some padding to push the content below the title
CSS
h1 {
	position: absolute;
	right: 50vw;
	transform: translateX(50%);
}
.header-container {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	border: 1px solid #ddd;
}
.header-container img {
	border-right: 1px solid #ddd;
}
.header-title-container {
	display: flex;
	flex-direction: column;
	flex-grow:1;
	text-align: center;
}
.spacer-75 {
	padding-top: 75px;
}

Open in new window

HTML
<div class="header-container">
   <img src="images/foreground1.png">
   <div class="header-title-container">
         <h1>Title at the center</h1>
		 <div class="spacer-75"></div>
         <p>some text(in middle of title text)</p>
   </div>
</div>

Open in new window

Working sample here
0
poojasureshkumarAuthor Commented:
Thanks!
0
Julian HansenCommented:
Question: how does the selected solution match the requirement of the question?
The title is not centered relative to the page,
There is no supplementary text centered relative to the cell?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET MVC

From novice to tech pro — start learning today.