place logo and text within the logo height

poojasureshkumar
poojasureshkumar used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jose Gabriel Ortega CastroTop Rated Freelancer on MS Technologies
Awarded 2018
Distinguished Expert 2018

Commented:
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).
Technology Scientist
Commented:
<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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

Commented:
Thanks!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial